1

也许您从标题中理解了，但是我在这里：

我有一个文件，从该文件中我从 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>

文件源.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 是如何工作的，为什么加载的内容不能与活动函数/代码交互？

4

3 回答 3

3

如果你使用 jQuery < 1.7，你应该使用live()或delegate()

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

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

如果您使用的是 jQuery > 1.7，则使用on()

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

处理页面加载后添加的 DOM 对象的事件。

请记住，页面上的 id 应该是唯一的，这很重要。你可以这样做：

<?php

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

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

}

?>

然后使用类选择器

于 2011-11-28T10:48:13.160 回答
2

例如，您只需要使用 live 而不是 click

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

于 2011-11-28T10:48:36.497 回答
0

一个可能的原因是因为 ID 对于页面中的元素应该是唯一的，但您正在创建其中的 10 个：

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

id因此，为每个元素添加一个索引或class=link改为创建它。

于 2011-11-28T10:48:57.247 回答