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? — showdev
– showdev, Commented Aug 10, 2015 at 21:57

taxicala · Accepted Answer · 2015-08-10 21:48:58Z

6

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.

answered Aug 10, 2015 at 21:48

taxicala

21.8k7 gold badges41 silver badges67 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Sean Kendle Over a year ago

You can also further narrow down the selector with the element type - for his example, button.firebutton.

Falko Woudstra · Accepted Answer · 2015-08-10 21:50:13Z

1

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

answered Aug 10, 2015 at 21:50

Falko Woudstra

1841 silver badge10 bronze badges

Collectives™ on Stack Overflow

jQuery click not firing for button

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related