Dynamic created element does not fire trigger

Question

I have a block of dynamic code which look like this.

        var li3 = document.createElement('li');
        li3.classList.add("col-sm-3");
        li3.classList.add("no_padding");
        var inner = "";
        inner = inner + "<div class='dropdown'>";
        inner = inner + "<button class='btn btn-default dropdown-toggle col-sm-12' style='border-radius: 0 4px 4px 0;' type='button' id='dropdownMenu1' data-toggle='dropdown' aria-haspopup='true' aria-expanded='true' data-questnrid='"+questnrid+"' data-questionid='"+questionid+"' data-dlnkid='"+dlnkid+"' data-lnkid='"+lnkid+"' data-qstaskedid='"+qstaskedid+"' data-qstaskedgrpid='"+qstaskedgrpid+"'>";
        inner = inner + "<span class='dropdown_text'>Choose a option</span>";
        inner = inner + "<span class='caret'></span>";
        inner = inner + "</button>";
        inner = inner + "<ul class='dropdown-menu' aria-labelledby='dropdownMenu1'>";
        inner = inner + "<li><a href='#' class='list-item'>Yes</a></li>";
        inner = inner + "<li><a href='#' class='list-item'>No</a></li>";
        inner = inner + "<li><a href='#' class='list-item'></a></li>";
        inner = inner + "</ul>";
        inner = inner + "</div>";
        li3.innerHTML = inner;
        document.getElementById(thisID).appendChild(li3);

in the web it looks more like this.

<li class='col-sm-2 no_padding'>
    <div class='dropdown'>
        <button class='btn btn-default dropdown-toggle col-sm-12' style='border-radius: 0px 4px 4px 0px; type='button' id='dropdownMenu1' data-toggle='dropdown' aria-haspopup='true' aria-expanded='true'>
            <span class='dropdown_text'>Choose a option</span>
            <span class='caret'></span>
        </button
        <ul class='dropdown-menu' aria-labelledby='dropdownMenu1'>
            <li><a href='#' class='list-item'>Yes</a></li>
            <li><a href='#' class='list-item'>No</a></li>
           <li><a href='#' class='list-item'></a></li>
       </ul>
    </div>
</li>

The first block gets called by n button press and it generates the list perfectly.
But now I click on the dropdown to accept the value for that dropdown, and no event fires. This is what I used.

    $('.dropdown-menu li > a').on("click", function(event){
        console.log("fire");
        $(this).closest('.dropdown').find('button span.dropdown_text').text(this.innerHTML);
    });

This event fires for the first block of code which is not dynamically created. But any oter block added after that dont fire the event trigger.

Any ideas?

Oh and here is my libraries that I use, if that might cause something

<script type="text/javascript" src="media/js/jquery-3.1.1.min.js"></script>
<link rel="stylesheet" href="media/css/bootstrap.css">
<script type="text/javascript" src="media/js/bootstrap.js"></script>

Try [event delegation](https://learn.jquery.com/events/event-delegation/) or bind event after adding element to DOM. — itzmukeshy7, Jan 24 '17 at 18:36
duplicate of http://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements?rq=1 — Sebastian Krysiak, Jan 24 '17 at 18:37
Possible duplicate of [Event binding on dynamically created elements?](http://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements) — Sebastian Krysiak, Jan 24 '17 at 18:38

score 1 · Accepted Answer · answered Jan 24 '17 at 18:40

1

$("body").on("click", '.dropdown-menu li > a',  function(event) {
})

Because the element didn't exist when the script ran, the event listener is not added to the button.

answered Jan 24 '17 at 18:40

Villa7_

2,203
2
18
22

score 1 · Answer 2 · edited Jan 24 '17 at 19:19

1

Try to select the entire document, and select your element after the "click" parameter.

$(document).on("click", ".dropdown-menu li > a", function(event){
    console.log("fire");
});

edited Jan 24 '17 at 19:19

Donald Duck

6,488
18
59
79

answered Jan 24 '17 at 18:54

fellyp.santos

48
1
7

Dynamic created element does not fire trigger

2 Answers2