jQuery click not firing for button

Question

I am having a lot of trouble with my code. This is a template that is served up from by Django backend.

{% load staticfiles %} 

<html>
    <head>
      {% csrf_token %}
        <title>Tempo</title>
        <link rel="stylesheet" type="text/css" href="{% static "css/styles.css" %}">
        <link rel="stylesheet" type="text/css" href="{% static "css/bootstrap.min.css" %}">
    </head>
    <body>
      <div id="header">
        <img id="logo" src="{% static "img/logo_wt.svg" %}"/>
      </div>
      {% csrf_token %}
      <form id="myform" action="/" method="POST" enctype="multipart/form-data">
        {% csrf_token %}
        <input type="file" name="csvFile" id='csv'>
        <input type="submit" value="Submit">
      </form>  
      <button class='firebutton'>Add buttons</button>

      <div class="fucking">{% autoescape off %}{{ data }}{% endautoescape %}</div>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
      <script src="http://johnny.github.io/jquery-sortable/js/jquery-sortable.js"></script>
      <script src="{% static "js/jquery-sortable.js" %}"></script>
         <script>
          $(document).ready(function(){
            $('td').on('click', function(){
              $(this).attr('contenteditable','true');
            })


            $('.firebutton').on('click', function(){
              $('tbody').find('tr').each(function(){
                $(this).append('<button type="button" id="remove" class="btn btn-default btn-lg good">' + 
                  '<span class="glyphicon glyphicon-minus" aria-hidden="true"></span>' +
                  '</button>')
              })

            })

            $('#remove').on('click', function(){
              console.log("button clicked")
            })
        })
        </script>
    </body>
</html>

After a POST my application responds with a html table. Then what happens is if someone clicks on .firebutton I add a button to every row in the table, except for the header. Now what I want to do is add functionality that removes a row. I was testing this by having a console.log for every newly added button click, but this doesn't work. If I put it in callback for the .firebutton listener then it works, but only once. Anyone know whats going on here?

possible duplicate of [Event binding on dynamically created elements?](http://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements) — showdev, Aug 10 '15 at 21:57

score 6 · Accepted Answer · answered Aug 10 '15 at 21:48

When you dynamically load content, newly created DOM elements will not have the event attached, you will have to delegate the event from an element that it's not created dynamically, or the document:

$(document).on('click', '.firebutton', function() {

This way, you are attaching the event to the document instead of your .firebutton elements, and the document will be delegating the event to every .firebutton element that is inside it's scope.

I recommend to not delegate from the document, but use a closer non-dynamic parent element instead, this is because of performance. The closer the delegator to theyr childs, the faster jQuery will find it without evaluating the entire DOM.

You can also further narrow down the selector with the element type - for his example, `button.firebutton`. — Sean Kendle, Aug 10 '15 at 21:55

score 1 · Answer 2 · answered Aug 10 '15 at 21:50

Check out the function jQuery.on(). When objects are added to the DOM after your jQuery(document).ready({ your stuff here });, they won't listen to .click listeners. A basic example:

jQuery('.parentDiv').on('click', '.yourRow', function(){
   // Do whatever you like here
});

jQuery click not firing for button

2 Answers2