Question

我有一个HTML文件，其中只包含基本元素（html，head，body，...），我希望用我的案例中存储在外部文件（“content.html”）中的内容填充它，使用JavaScript（和JQuery）。我用函数$ .get（）完成了这个，但我不知道，如何访问我用这个函数得到的信息。

例如，如果单击链接，我想抛出警报。我的代码如下所示：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>

    <script type="text/javascript">
    $(document).ready(function(){

       $.get("content.html", addContent);   // calls addContent

       function addContent(data)            // fills <div id='content'> with content.html
       {
          $("#content").html(data);
          alert('Load was performed.');
       }


       $("a").click(function(event){ // !!!if any link is clicked, throw an alert 
         alert("Link clicked");
         event.preventDefault();
       });

     });
    </script>

</head>

<body>
  <div id="content">
  <!--CONTENT OF content.html WILL BE INSERTED HERE-->
  </div>
</body>
</html>

这就是content.html的样子：

<h1>Band Creator Home</h1>
    <p>Currently following apps are available:</p>
    <ul>
        <li><a href="/bands/">Bands</a></li>
        <li><a href="/instruments/">Instruments</a></li>
        <li><a href="/musicians/">Musicians</a></li>
        <span></span>
    </ul>

由于原始HTML中没有元素，因此永远不会抛出警告“链接点击”。如何访问$ .get（）收集的这些元素？

Answer 1

您正在寻找.live()绑定。这样做：

$("a").live('click', function(event){ // !!!if any link is clicked, throw an alert 
     alert("Link clicked");
     return false;
});

事件方法.preventDefault()不适用于.live()，return false。由于.live()为document.body添加了一个偶数监听器，因此如果可能的话，最好使用.delegate()。您可以告诉.delegate最近的父节点，您需要观看所有元素共享。在你的实例中：

$('ul').delegate('a', 'click', function() {
     alert('Link Clicked');
     return false;
});

参考：.live()，.delegate()

Answer 2

AJAX是异步的服务器仅在get方法完成后的某个时间发送回复。

因此，在新元素存在之前，您最终会在调用click之前添加addContent处理程序。
如果在addContent中添加处理程序，它将正常工作，因为新元素已经添加。

或者，您可以使用jQuery的live方法向所有与选择器匹配的元素添加处理程序，无论它们何时被创建。

Answer 3

有一些不同的方式。您可以在加载内容后设置事件：

function addContent(data) {
  $("#content").html(data);
  alert('Load was performed.');
  $("#content a").click(function(event){
    alert("Link clicked");
    event.preventDefault();
  });
}

你可以使用live方法来捕捉它起泡的时候：

$("a").live('click',function(event){
  alert("Link clicked");
  event.preventDefault();
});

如果您使用的是1.4版或更高版本的jQuery，则可以使用delegate方法，类似于live方法，但是您可以在比范围更近的范围内检查冒泡事件身体：

$("#content").delegate('a', 'click',function(event){
  alert("Link clicked");
  event.preventDefault();
});

Answer 4

live方法的替代方法是在新创建的元素的某个父级上使用delegate。如果您不希望将事件传播到DOM层次结构的顶部，这将非常有用。

$("#parentofa").delegate("a", "click", function(event) {
    // ... my handler
    event.preventDefault();
})

点击的<a>元素存储在event.target

中

请注意preventDefault在这里工作，但事件已经传播到父元素（即之间的所有元素已经收到元素）

使用JavaScript（和JQuery）动态地向HTML页面添加内容 - 如何访问新内容？

4 个答案: