adding element using loop in jquery doesn't appear in 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>

when you say cannot select it, it means it does not trigger the click function ? — Nicolas, Jun 28 '17 at 14:10
Possible duplicate of [Event binding on dynamically created elements?](https://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements) — freedomn-m, Jun 28 '17 at 14:14

score 0 · Answer 1 · answered Jun 28 '17 at 14:09

0

Dynamically appended element use with on()

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

answered Jun 28 '17 at 14:09

prasanth

22,145
4
29
53

aka event delegation - see details on linked duplicate – freedomn-m Jun 28 '17 at 14:15

score 0 · Answer 2 · edited Jun 28 '17 at 14:15

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>

Or use event delegation - see details on linked duplicate – freedomn-m Jun 28 '17 at 14:15 — freedomn-m, Jun 28 '17 at 14:15

Arun · Answer 3 · 2017-06-28T14:17:08.607

0

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)
});

edited Jun 28 '17 at 14:17

answered Jun 28 '17 at 14:14

Arun

378
1
11

*"Please use .on instead of .click method"* **where appropriate** not always. – freedomn-m Jun 28 '17 at 14:16

score 0 · Answer 4 · answered Jun 28 '17 at 14:17

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!');
});

score 0 · Answer 5 · answered Jun 28 '17 at 14:18

0

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

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

For sure, it works ;)

answered Jun 28 '17 at 14:18

Julien 'JS'

149
10

You're welcome ;) You can close this issue if it's ok ! – Julien 'JS' Jun 28 '17 at 15:21

adding element using loop in jquery doesn't appear in dom

5 Answers5