Question

我正在尝试访问使用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”，但目前它只显示“内容”。我怎样才能做到这一点？

提前谢谢

Answer 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/

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

1 个答案: