On() не работает после изменения HTML

Question

Demo - http://jsfiddle.net/P9rs6/

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

}); 

Я могу понять, почему он не работает после второго DblClick.

Answer 1

Вы можете использовать on() для привязки событий к динамически добавленным элементам. Как это:

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

Это только для простого примера, то лучше, чтобы связать его на элемент ближе к кнопке, которая уже находится на странице, когда он сначала загружает, а не на document.