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

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

1 голос
/ 28 ноября 2011

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

У меня есть файл, из этого файла я загружаю некоторые другие данные из файла 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 ]

3 голосов
/ 28 ноября 2011

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

$("#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>';

}

?>

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

2 голосов
/ 28 ноября 2011

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

$("#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/

0 голосов
/ 28 ноября 2011

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

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

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

...