在jQuery中使用循环添加元素不会出现在dom中

Question

I am adding elements using a json call. The issue I have is that if I append an item outside the loop it appears in the DOM and I can select it, if I appended in the loop I cannot select it?

Any help would be appreciated.

     <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

Dynamically appended element use with on()

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

Answer 2

when added dynamically, you need to re-add the listener to your DOM element, this way Jquery knows which one to call. i suggest you add your .click method in a function that you can call after the async loop is done (your $.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

Please use .on instead of .click method. .on method will work for dynamically added elements.

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

Answer 4

You're creating an element after the document has loaded. AFAIK elements that are dynamically created after the document has loaded has no event binded on it.

What you can do is to bind the event on document. Remove the click event in the document ready function.

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

Answer 5

You need to listen the event outside the reloaded view, apparently $("#DivLogOut").

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

For sure, it works ;)