0

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

先感谢您

4

1 回答 1

3

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

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

于 2013-06-12T08:57:46.400 回答