通过jquery创建的按钮不响应点击

Question

我已经了解到使用$（'。whatever'）。click（）仅适用于最初创建的项目。 其他项目将无法以正确的方式响应。 然后，我被引导使用$（'。whatever）.on（'click'，myFunction（））之类的东西。 但是，由于没有调用新创建的项目，因此我没有发现任何差异。

这是我的示例代码的JSFiddle演示： http : //jsfiddle.net/atrus6/zaKZN/

我最初的输入加上“ Kill”将以正确的方式工作，但是任何其他的“ input + kill”将无济于事。 我是错误地使用.on（）还是其他东西？

Answer 1

尝试：

$('.rmv').live('click', function() {
    console.log('here');
    $(this).parent().remove();
    return false;
});

要么

$(document).on('click', '.rmv', function() {
    console.log('here');
    $(this).parent().remove();
    return false;
});

jsFiddle演示

Answer 2

live（）可以像您期望的on（）一样工作，但已弃用。

on（）仅适用于调用on（）时存在的元素。 但是，可以通过将on（）绑定到将成为新创建的元素的父元素的元素并指定选择器来像live（）一样使用它。

因此，例如

$('body').on('click', '.rmv', function() {
    console.log('here');
    $(this).parent().remove();
    return false;
});

Answer 3

新创建的元素不会自动绑定到您的点击处理程序，因为它们是在您定义出价后​​创建的。 一种解决方案可能是在创建新元素时绑定它们。

jsFiddle在这里： http : //jsfiddle.net/zaKZN/17/

$('.rmv').on('click', remove);

$('.add').click(add);

function remove()
{
    console.log('here');
    $(this).parent().remove();
    return false;
}

function add()
{
    var add = "<div class='input-append'>";
    add += "<input type='text' name='br'>";
    add += "<button class='btn btn-danger rmv'><i class='icon-minus'>Kill</i></button></div>";
    $(this).before(add);

    //Bind newly created elements
    $('.rmv').on('click', remove);

    return false;
}