jquery event not working for dynamic elements

Question

on click of button i am adding dynamic element eg: anchor tag having some id, on clicking the dynamic element alert should open which is not happening.

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script>
$(document).ready(function(){

    $("#submit").on("click",function(){
         $("#op").html("<a href='javascript:void(0)' id='demo'>Click</a>");
    });
    $("#demo").on("click",function(){
        alert('In Demo....');
    });
});

</script>
</head>
<body>
<button id="submit">Submit</button>
<pre id='op' ></pre>
</body>
</html>

Possible duplicate of [Event binding on dynamically created elements?](http://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements) — Ibrahim Khan, Oct 17 '16 at 17:52

score 2 · Accepted Answer · answered Oct 17 '16 at 17:52

2

Try this

$(document).on("click","#submit",function(){
     $("#op").html("<a href='javascript:void(0)' id='demo'>Click</a>");
});

$(document).on("click","#demo",function(){
    alert('In Demo....');
});

The problem is that your events are not attached to the element.

answered Oct 17 '16 at 17:52

Kinshuk Lahiri

1,468
10
23

Awesome @Kinshuk Lahiri – Raman Oct 17 '16 at 17:54
@KinshukLahiri, what about if you want to add multiple, you are using id there id='demo' – Oct 17 '16 at 17:58
@EaBangalore then instead of that you should use class and use `this` instead. @Raman No worries, take your time and learn. Happy programming. – Kinshuk Lahiri Oct 17 '16 at 18:02

jquery event not working for dynamic elements

1 Answers1