在 ajax 加载页面上执行 JQuery 操作答案

【问题标题】：Perform JQuery actions on ajax loaded page在 ajax 加载页面上执行 JQuery 操作
【发布时间】：2013-06-12 08:53:37
【问题描述】：

我正在尝试访问使用 jquery.load 加载到 div 中的 html 文件中的内容。

我的索引页面如下所示：

<!DOCTYPE html>
  <html>
    <head>
       <title>
       </title>
       <script src="jquery.js" type="text/javascript"></script>
       <script src="script.js" type="text/javascript"></script>
       <link rel="stylesheet" type="text/css" href="style.css">
    </head>
    <body>
        <div id="content">
        </div>  
    </body>
</html>

到目前为止，我的脚本如下所示：

$(document).ready(function() {
    $("#content").load("content.html");
    $("#content").click(function(){
        alert($(this).attr("id"));
    });
});

content.html 页面：

<!DOCTYPE html>  
<html >  
    <head>
        <title></title>  
    </head>  
    <body>  
        <h1 id="header1">
        Content
        </h1>
        <p>
            This is a paragraph
        </p>
        <p>
            This is another paragraph
        </p>
    </body>
</html>

所以我想要发生的是：当我单击内容 div 中的标签时，它应该显示该标签的 id - 即“header1”，但目前它只显示“内容”。我怎样才能做到这一点？

提前谢谢你

【问题讨论】：

标签： javascript jquery html ajax

【解决方案1】：

将事件处理程序绑定到内容中的每个元素。

$(document).ready(function() {
    $("#content").load("content.html");
    $("#content, #content *").click(function(e){
         alert(this.id);
         e.stopPropagation();
     });
});

或者让事件传播：

$(document).ready(function() {
    $("#content").load("content.html");
    $("#content").click(function(e){
        alert(e.target.id); //may return undefined if no id is assigned.
    });
});

工作示例： http://jsfiddle.net/5JmsP/

【讨论】：

@Morne 太好了，很高兴我能帮上忙！