Замена текста html-страницы с помощью jQuery

#javascript #jquery #html

#javascript #jquery #HTML

Вопрос:

У меня есть простой код javascript, который заменяет страницу content….by содержимое другого файла (test2.html )

Код:

 $(document).ready(function(){
    $("[href='#']").click(function() {
        function getcontent(url, id) {
            $("#id").load("url");
        }
    });
});

Теперь я использую

 <div id = "content">                 
<p> REPLACE </p>
</div>
<a href="#" onClick="getcontent('test2.html', 'content')">click here</a>

Итак, теперь при нажатии click here REPLACE должно быть заменено содержимое test2.html …но этого не происходит…
Я включил необходимые jquery.js файл в моем скрипте..

Ответ №1:

Нет, это не сработает. getcontent это функция, определенная в определенной области видимости — функции обратного вызова обработчика щелчков мыши. Он недоступен в глобальной области видимости — области, которую получает onClick метод.

Вы должны использовать подлинный обработчик кликов, возможно, устанавливая данные с использованием атрибутов данных:

 $('[href="#"]').click(function() {
    $('#'   $(this).data('id')).load($(this).data('url'));
});

Используя следующий HTML:

 <a href="#" data-url="test2.html" data-id="content">click here</a>

1. это не работает, если вы можете, пожалуйста, взглянуть на мой полный код… Ссылка

2. Выполняется ли HTTP-запрос? Посмотрите с помощью сетевого монитора, например Firebug или Chrome console

3. моя консоль chrome ничего не показывает, и мой сервер Python сообщает :: code 404, файл сообщения не найден «GET / favicon.ico HTTP / 1.1» 404-

Ответ №2:

У вас странная настройка. Функция getcontent не определена в глобальной области видимости, она не может быть найдена onclick обработчиком событий в HTML. Есть и другие проблемы.

Я предлагаю что-то вроде:

 <a href="#content" rel="test2.html">click here</a>

 $(function(){
    $("a[href^='#']").click(function(){
        $(this.href).load(this.rel);
    });
});

Ответ №3:

 $('#'   id).load(url);

В вашем текущем методе, описанном выше, вы передаете строковые литералы, а не сами переменные.

1. Это не сработает. getcontent не определено в глобальной области видимости.

2. @Felix: как определить это в глобальной области видимости

3. @Ran: Это не единственная проблема. Взгляните на @lonesomeday’s или мой ответ.

Ответ №4:

Похоже, вы неправильно понимаете, что делают определенные части вашего кода. Кроме того, я бы рекомендовал присвоить вашей href-ссылке реальный идентификатор, чтобы упростить задачу. Вам не нужно использовать метод ‘click’ jQuery, а также назначать встроенный в HTML обработчик onclick.

Попробуйте это вместо:

 <div id = "content">                 
   <p> REPLACE </p>
</div>
<a id="clickThis" href="#">click here</a>

$(document).ready(function() {
    $('#clickThis').click(function() {
       $('#content').load('test2.html');
    });
});

Ваш код с некоторыми комментариями:

 $(document).ready(function(){
    // this will assign a click handler, you don't need an 'onclick'
    // attribute on the anchor tag also
    $("[href='#']").click(function() {
        // but what does your click handler do?
        // It defines a function that is never called.
        function getcontent(url, id) {
            $("#id").load("url");
        }
    });
});