在jquery中使用循環添加元素不會出現在dom中

Question

我正在使用json調用添加元素。我遇到的問題是，如果我在循環外追加一個項目，它會出現在DOM中，我可以選擇它，如果我在循環中添加了我無法選擇它？

任何幫助，將不勝感激。

 <ul data-role='listview' class='ui-listview' id="DivLogOut" > 
    </ul> 



<script type="text/javascript"> 

    $(document).ready(function() { 

      $("#DivLogOut").append($("<li class='PersonLogout'>TEST ITEM</li>")); 

      $.get("api/StaffLoggedIn.ashx?loid=" + loid, function (data) { 

       var jsonobj = $.parseJSON(data); 
       $(jsonobj).each(function (i, item) { 
        $("#DivLogOut").append($("<li class='PersonLogout'>TEST ITEM</li>")); 
       }) 

      }) 

     $(".PersonLogout").click(function() { 
      alert("test"); 
     }) 

    }) 
</script> 

Answer 1

動態附有on()

$(document).on("click",".PersonLogout",function() { 
      alert("test"); 
     }) 

Answer 2

元素使用動態添加的時候，需要聽者重新添加到您的DOM元素，這樣的Jquery知道調用哪一個。我建議你在異步循環完成後，你可以調用一個函數添加.click方法（您$.get）EX：

<ul data-role='listview' class='ui-listview' id="DivLogOut"> 
 
</ul> 
 

 

 

 
<script type="text/javascript"> 
 
    $(document).ready(function() { 
 

 
    $("#DivLogOut").append($("<li class='PersonLogout'>TEST ITEM</li>")); 
 

 
    $.get("api/StaffLoggedIn.ashx?loid=" + loid, function(data) { 
 

 
     var jsonobj = $.parseJSON(data); 
 
     $(jsonobj).each(function(i, item) { 
 
     $("#DivLogOut").append($("<li class='PersonLogout'>TEST ITEM</li>")); 
 
     }) 
 
     addListener(); 
 
    }) 
 

 
    function addListener() { 
 
     $(".PersonLogout").click(function() { 
 
     alert("test"); 
 
     }) 
 
    } 
 

 
    addListener(); 
 
    }) 
 
</script>

Answer 3

請使用。對，而不是。點擊方法。 .on方法可用於動態添加元素。

$(document).on("click",".PersonLogout",function() { 
    //You can access the item using $(this) 
}); 

Answer 4

您正在創建文檔加載後的元素。在文檔加載後動態創建的AFAIK元素沒有綁定事件。

你可以做的是綁定文檔上的事件。刪除文件就緒功能中的點擊事件。

$(document).on('click', '.PersonLogout', function() 
{ 
    alert('I have been clicked!'); 
}); 

Answer 5

您需要在重新加載視圖之外監聽事件，顯然是$（「＃DivLogOut」）。

$("#DivLogOut").on('click', '.PersonLogout', function(){ 
    .... 
}); 

可以肯定的，它的工作原理;）