Jquery嵌套div .click事件

鏈接#loadContent將加載tree.html。在成功加載內容後，腳本將重新初始化tree.html中的一些函數。但是，我無法使加載內容中的.click事件發揮作用。Jquery嵌套div .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中點擊的項目？感謝

來源

2010-05-27 Sylph

究竟什麼都是' 's for？ – Eric 2010-05-27 10:50:02

如果你移除'$（document）.ready（）'（不知道當你插入到一個現有的DOM中時這個事件是否被觸發），它會起作用嗎？儘管jQuery試圖猜測返回的數據類型，但也許您應該在Ajax調用中明確聲明數據類型：'dataType：html' – 2010-05-27 10:52:03

這個怎麼樣：從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>

來源

2010-05-27 10:57:23

嗨，感謝您的回答，您是對的，腳本必須位於index.html ，但首先不起作用的主要原因很有趣。將發佈答案:) – Sylph 2010-05-31 03:16:51

您可以使用.delegate()或.live()爲這樣的：

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

將這個腳本在主網頁或外部文件，無論哪種方式......它會處理的點擊次數，即使ŧ他的樹稍後通過AJAX加載。當它冒起DOM時看到了click事件......這在當前或未來的元素上以相同的方式發生，所以樹的添加，替換，更新等都無關緊要。。當您使用.click()時，您將綁定到當時存在的元素（儘管您的腳本看起來完全沒有運行）。

更改爲.delegate()會在這裏一個更簡單的方法，它可以讓你把你所有的JavaScript的一起在一個外部文件，使生活在指數爲用戶更好地以及:)

來源

2010-05-27 11:35:43

嗨，謝謝你的回答，但它不工作，終於找到原因。將它張貼:) – Sylph 2010-05-31 03:15:08

在返回成功。 html，.onclick事件必須在.tree初始化之後發生。聽起來很奇怪我知道，但它的工作方式..我相信這是因爲onclick是樹的一個子集，因此初始化必須在此之後而不是之前：S

所以，腳本沒有錯，只是改變位置> _ <

$("#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 
});

謝謝大家！

來源

2010-05-31 03:22:01 Sylph

Jquery嵌套div .click事件

回答

相關問題