После загрузки html для div с помощью jQuery существующие коды / функции не работают для загруженного контента

Может быть, вы поняли из названия, однако здесь я иду:

У меня есть файл, из этого файла я загружаю некоторые другие данные из файла php:

Файл 1 HTML-файл

<html>
     <head>
      <script type="text/javascript" src="js/jquery.js"></script>
      <script type="text/javascript">
          $(function() {
               $('#content').load('source.php');

               $("#link").click(function() {
                       alert('Message1!');
                       return false;
               });
          });
      </script>
     </head>

     <body>
           <div id="content"></div>
     </body>
</html>

Файл source.php

<?php

for($i=1;$i<=10;$i++) {

     echo '<a href="#" id="link">Link '.$i.'</a>';

}

?>

После того, как контент загружен из php файла, теперь этот код

$("#link").click(function() {
        alert('Message1!');
        return false;
});

не работает для загруженного контента (ссылки).

Мне нужно просто объяснить, как работает этот DOM, почему загруженный контент не может взаимодействовать с активными функциями / кодами?

Источник

3 ответа

Решение

Вы просто должны использовать в прямом эфире вместо клика, например

$("#link").live('click', function() {
        alert('Message1!');
        return false;
});

РЕДАКТИРОВАТЬ:

Я только что узнал, что он устарел с JQuery 1.7, поэтому теперь мы должны использовать функцию.on(), например:

$("#link ").on("click", function(event){
    alert('Message1!');
    return false;
});

http://api.jquery.com/live/

http://api.jquery.com/on/

Источник

Вы должны использовать live() или делегат (), если вы используете jQuery < 1.7

$("#link").live('click', function() {
        alert('Message1!');
        return false;
});

$("body").delegate('#link', 'click', function() {
        alert('Message1!');
        return false;
});

или используйте on(), если вы используете jqQuery > 1.7

$("body").on('click', '#link', function() {
        alert('Message1!');
        return false;
});

Для обработки событий для объектов DOM, которые добавляются после загрузки страницы.

Помните, что идентификатор должен быть уникальным на странице, это важно. Вы могли бы сделать:

<?php

for($i=1;$i<=10;$i++) {

     echo '<a href="#" class="addedLinks" id="link'.$i.'">Link '.$i.'</a>';

}

?>

а затем использовать класс селектор

Источник

Одной из возможных причин является то, что идентификатор должен быть уникальным для ваших элементов на странице, но вы создаете 10 из них:

for($i=1;$i<=10;$i++) {
    echo '<a href="#" id="link">Link '.$i.'</a>';
}

Так что добавьте индекс к id для каждого элемента или сделать его class=link вместо.

Источник
Другие вопросы по тегам