onclick is not working for dynamically added buttons

Question

I have one div section with dynamic data and static button.

HTML:

<div class="main">
    <div class="subSection">                    
    <section>
    <button type="button"  class="btn btn-danger hideEquipmentDetails" onclick="clickme()"><i class="fa fa-times" ></i></button>
    </section>
    </div>
</div>

SCRIPT:

<script>
details()
    function details(){
    var details= response.data.filters;
        $.each(details,function(i,value){
        $('.subSection').append('<section><label>Speed</label><label>'+value.speed+'</label></section>');
    });
    }

function clickme(){
$('.main').hide();
}
</script>

Here click me function works fine when button is clicked.

Am refreshing the method for every 5 seconds.so I need to clear the previous html content of .subSection when method is loaded.So I have decided to append a button dynamically.

I changed my code like this:

HTML:

    <div class="main">
        <div class="subSection">                    
        </div>
    </div>

SCRIPT:

    <script>
    details()
        function details(){
        $('subSection').html('');
        var details= response.data.filters;
            $.each(details,function(i,value){
            $('.subSection').append('<section><label>Speed</label><label>'+value.speed+'</label></section>');
        });
     $('.subSection').append('<section><button type="button"  class="btn 
   btn-danger hideEquipmentDetails" onclick="clickme()"><i class="fa fa-
   times" ></i></button>
        </section>')
        }

    function clickme(){
    $('.main').hide();
    }
    </script>

But clickme method is not triggered now.I tried using .click also.Is anything wrong in my code?

Possible duplicate of [Event binding on dynamically created elements?](https://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements) — Vishnu Bhadoriya, Feb 20 '18 at 07:56
You might be better off using `$(document).on('click', '.hideEquipmentDetails', function() { $('.main').hide() });` — Barskey, Feb 20 '18 at 08:01

Barskey · Answer 1 · 2018-02-20T10:06:22.043

2

.on() works on dynamically created elements if used with the following syntax:

$(document).on('click', '<selector>', function() {});

$(document).on('click', '.hideEquipmentDetails', function() { 
  $('.main').hide();
});

edited Feb 20 '18 at 10:06

answered Feb 20 '18 at 08:05

Barskey

423
2
5
18

1

@Barskey as you said `on()` works on dynamically created elements, this is not always true, but the thing is that `on()` always works on dynamically created elements only if it is use like below. `$(parent).on('click', '.dynamic_element', function() { // do somthing here });` – Abdullah Shoaib Feb 20 '18 at 08:50
I'm not sure what you mean with below, @AbdullahShoaib – Barskey Feb 20 '18 at 08:53
@Barskey check again. – Abdullah Shoaib Feb 20 '18 at 08:54
@AbdullahShoaib What exactly are you trying to clarify? – Barskey Feb 20 '18 at 08:59
@Barskey i just want to clarify that your statement " `.on()` works on dynamically created elements " is not always valid. Make sense ? – Abdullah Shoaib Feb 20 '18 at 09:05
@AbdullahShoaib Could you represent a situation in what `.on()` doesn't work? – Barskey Feb 20 '18 at 09:14
$('.dynamic_element').on('click',function(){ // this code will not work }); – Abdullah Shoaib Feb 20 '18 at 09:16

score 1 · Answer 2 · answered Feb 20 '18 at 08:08

Apparently the onclick attribute is not used when adding html dynamically.

Changing your code to this should work:

$('.subSection').append('<section><button type="button" class="btn '+
  'btn-danger hideEquipmentDetails"><i class="fa fa-times"></i>'+
  '</button></section>').find('button').click(clickme)

score 1 · Answer 3 · answered Feb 20 '18 at 08:20

Move the particular function declaration inside the <body> tag and it will work automatically for dynamically created buttons.

<script>
  function clickme(){
  alert("test");
  $('.main').hide();
 }
</script>
<div class="main">
   <div class="subSection">                    
   </div>
</div>

Code Snippet

details();

        function details(){
        $('subSection').html('');
        /*var details= response.data.filters;
            $.each(details,function(i,value){
            $('.subSection').append('<section><label>Speed</label><label>'+value.speed+'</label></section>');
        });*/
     $('.subSection').append('<section><button type="button" class="btn btn-danger hideEquipmentDetails" onClick="clickme()"><i class="fa fa-times" ></i>TEST</button></section>');
        }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script>
      function clickme(){
      alert("test");
      $('.main').hide();
     }
    </script>
   <div class="main">
       <h1>Test Content</h1>
        <div class="subSection">                    
        </div>
    </div>

score 1 · Answer 4 · answered Feb 20 '18 at 08:37

var count=0;
$(document).ready(function(){
  
  $("#add_button").click(function(){
    count+=1;
    $(".container").append('<button>Button '+count+'</button>');
  })

  $(".container").on('click', 'button', function(){
    alert("Button " + $(this).html() + " clicked");
  })
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<style>
.container{padding:10px}
.container button{padding:3px; margin:5px; border: solid 1px red;}
</style>

<button id="add_button">Add</button>

<div class="container">
</div>

score 0 · Accepted Answer · answered Feb 20 '18 at 09:21

Thanks everyone by giving great ideas and I got solution for by question by just making an simple change in my code.

 function details(){
        $('subSection').html('');
        $('.subSection').append('<section><button type="button"  class="btn  btn-danger hideEquipmentDetails" onclick="clickme()"><i class="fa fa-
   times" ></i></button>
        </section>')
        var details= response.data.filters;
            $.each(details,function(i,value){
            $('.subSection').append('<section><label>Speed</label><label>'+value.speed+'</label></section>');
        });
        }

Just append the button first then append the data.

onclick is not working for dynamically added buttons

5 Answers5