html更改后,On()不起作用

时间:2014-02-03 17:36:47

标签: javascript jquery html

演示 - 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之后它不起作用。

1 个答案:

答案 0 :(得分:2)

您可以使用on()来绑定动态添加元素的事件。像这样:

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

这只是一个简单的例子,最好将它绑定在第一次加载时已经在页面上的按钮上的元素上,而不是document上。