On() doesn't work after html change

Question

HTML

<span class="js-make-input" data-id="1" data-value="5">5</span>

jQuery

    $('.js-make-input').on('dblclick', function(){
    var itemID = $(this).attr('data-id');
    var value = $(this).attr('data-value');

    $(this).attr('class', 'js-edit-row');

    $(this).html(' <input type="text" value="' + value + '" data-id="' + itemID + '" style="width: 45px" /> ');
});

$('.js-edit-row').on('dblclick', function(){
    $(this).attr('class', 'js-make-input');
    $(this).html(value);
    var value = $(this).attr('data-value', value);

});

I can understand, why it doesn't work after second dblclick.

You might also want to take a look [here](https://coderwall.com/p/ks_27q) for how to create DOM objects without string concatenation. — jeroenvisser101, Feb 03 '14 at 17:41

Milind Anantwar · Accepted Answer · 2014-02-03T17:43:43.013

2

You may use on() for binding events on dynamically added elements. Like this:

$(document).on('dblclick','.js-make-input', function(){ /*Your code here*/ });

This is just for simple example, it is better to bind it on element closer to your button that is already on page when it first loads rather than on document.

edited Feb 03 '14 at 17:43

answered Feb 03 '14 at 17:37

Milind Anantwar

81,290
25
94
125

4

Ideally, substitute `document` for a common parent instead. i. e. the form. – crush Feb 03 '14 at 17:38
3

This answer could be improved by describing *why* OP's code didn't work. – Zach Lysobey Feb 03 '14 at 17:41

On() doesn't work after html change

1 Answers1