Question

链接#loadContent将加载tree.html。成功加载内容后，脚本会重新初始化tree.html中的某些功能。但是，我无法让.click事件在加载的内容中运行。

的index.html

<a href="#" id="loadContent">Load</a>
 <script type="text/javascript">
      $(function() {
                    $("#loadContent").click(function() {
                      $.ajax({
                    url: "tree.html"
                    ,success: function(data) {
                    $('#result').html(data);
                    $("#demo_1").tree({
            rules : {
                use_max_children : false,
                use_max_depth : false
            },
            callback : {
                onmove : function (NODE,REF_NODE,TYPE,TREE_OBJ,RB) {
                    alert(TREE_OBJ.get_text(NODE) + " " + TYPE + " " + TREE_OBJ.get_text(REF_NODE));
                }
            }
        });
                    }
                    });
                });
            });
  </script>
  <script type="text/javascript" class="source">
    $(function () { 
        $.tree.drag_start = function () {
            $("#log").append("<br />Drag start ");
        };
        $.tree.drag = function () {
            $("#log").append(" .");
        };
        $.tree.drag_end = function () {

            $("#log").append(" Drag end<br />");
        };
        $("#demo_1").tree({
            rules : {
                use_max_children : false,
                use_max_depth : false
            },
            callback : {
                onmove : function (NODE,REF_NODE,TYPE,TREE_OBJ,RB) {
                    alert(TREE_OBJ.get_text(NODE) + " " + TYPE + " " + TREE_OBJ.get_text(REF_NODE));
                }
            }
        });

        $("#demo_2").tree({
            rules : {
                use_max_children : false,
                use_max_depth : false
            },
            callback : {
                onmove : function (NODE,REF_NODE,TYPE,TREE_OBJ,RB) {
                    alert(TREE_OBJ.get_text(NODE) + " " + TYPE + " " + TREE_OBJ.get_text(REF_NODE));
                }
            }
        });

    });
    </script>

<div class="demo" id="demo_2">
  <ul>
    <li id="phtml_1" class="open"><a href="#"><ins>&nbsp;</ins>Root node 1</a>
    <ul>
      <li id="phtml_2"><a href="#"><ins>&nbsp;</ins>Child node 1</a></li>
      <li id="phtml_3"><a href="#"><ins>&nbsp;</ins>Child node 2</a></li>
      <li id="phtml_4"><a href="#"><ins>&nbsp;</ins>Some other child node with longer text</a></li>
    </ul>
    </li>
    <li id="phtml_5"><a href="#"><ins>&nbsp;</ins>Root node 2</a></li>

  </ul>


</div>

<div id="result"></div><br>
<div id="log"></div>

Tree.html

<div class="demo" id="demo_1">
  <ul>
    <li id="phtml_1" class="open"><a href="#"><ins>&nbsp;</ins>Root node 1</a>
    <ul>
      <li id="phtml_2"><a href="#"><ins>&nbsp;</ins>Child node 1</a></li>
      <li id="phtml_3"><a href="#"><ins>&nbsp;</ins>Child node 2</a></li>
      <li id="phtml_4"><a href="#"><ins>&nbsp;</ins>Some other child node with longer text</a></li>
    </ul>
    </li>
    <li id="phtml_5"><a href="#"><ins>&nbsp;</ins>Root node 2</a></li>
    <li><a class="preset_text" id="1">model 1</a> </li>
    <li><a class="preset_text" id="2">model 2</a></li>
  </ul>
</div>

<script type="text/javascript">
    $(document).ready(function() {
        $('.preset_text').click(function(){         
            var target = $(this).attr("id");            

            alert(target);
        });
    });
</script>

在tree.html中，我无法获得警报（目标）。但是，如果我将此部分从tree.html中的“div＃demo_1”移出，我可以收到警报（目标）。

<a class="preset_text" id="1">model 1</a> 
<a class="preset_text" id="2">model 2</a>

如何检测div demo_1中点击的项目？感谢

Answer 1

您可以使用.delegate()或.live()：

$(function() {
  $('#result').delegate('.preset_text', 'click', function() {
    var target = $(this).attr("id");
    alert(target);
  });
});

将此脚本放在您的主页面或外部文件中，无论哪种方式......即使稍后通过AJAX加载树，它也会处理点击。当它在DOM中冒泡时看到click事件就行了......这在当前或未来的元素上以相同的方式发生，所以如果添加，替换，更新树等都无关紧要。 ..有用。当您使用.click()时，您绑定到当时存在的元素（尽管您的脚本似乎根本没有运行）。

此处更改为.delegate()将是一种更简单的方法，它允许您将所有javascript放在一个外部文件中，以便为您的用户提供更好的生活：）

Answer 2

如何：从tree.html中删除脚本

index.html中的

添加此脚本（假设您使用jquery 1.3 +）

<script type="text/javascript">
$(function(){
   $('#result .preset_text').live('click',function(){
     var target = $(this).attr("id");            
     alert(target);
   });
});
</script>

Answer 3

在index.html中返回成功后，.onclick事件必须在.tree初始化之后。我知道这听起来很奇怪，但它的工作原理是这样的......我相信这是因为onclick是.tree的一个子集，因此初始化必须在之后而不是之前：S

所以，脚本没有错，只需更改位置＆gt; _＆lt;

$("#subtopic_tree").tree({
rules : {
use_max_children : false,
use_max_depth : false
},
callback : {
onmove : function (NODE,REF_NODE,TYPE,TREE_OBJ,RB) {
alert(TREE_OBJ.get_text(NODE) + " " + TYPE + " " + TREE_OBJ.get_text(REF_NODE));
}
}
});

$('.addResource').click(function(){

//action to do here
});

全部谢谢！

Jquery嵌套div .click事件

3 个答案: