Question

在我正在构建的JQM（1.3.0）应用程序中，我使用“on”将所有提交按钮绑定到单击事件，意图是现在和将来所有提交按钮都将绑定此事件。我在$（document）.ready（）中进行这些绑定，因为我觉得它只需要调用一次......永远。

我使用一些内容更新JQM panel并在该内容上调用.trigger（'create'）。应该发生的是新创建的提交按钮应该在点击时触发绑定的点击事件，但事实并非如此。

这是一个fiddle，展示了我正在努力实现的目标。在演示中，每当您单击提交按钮时，消息框都应显示“Clicked”...不幸的是，它只发生在第一个元素上。

$(function(){
    $('input[type="submit"]').on('click', function(e){
        $('#msg').append('<div>Clicked</div>');
        $('#panel').html('<input type="submit" value="New Button">').trigger('create');
    });
});

我在这里错误地使用.on（）吗？我想我可以将所有绑定填充到一个函数中，然后在调用.trigger（'create'）时调用该函数......但这似乎效率低下。

Answer 1

你需要

$('#someParentElement').on('click', 'input[type="submit"]', function(e){
   //handler
});

你拥有它的方式相当于旧的

$('input[type="submit"]').bind('click', function(e){
   //handler
});

Answer 2

使用.on方法绑定事件有两种方法。一种是使用事件委托，它将事件绑定到更高级别元素（如果需要，一直到document，但 close 更好）然后当一个事件冒泡时，它会监听它，如果它与传入的选择器匹配则会触发它。使用.on的第二种方法是将其直接绑定到元素而不使用委托。

您使用的是.on方式的第二个版本，但您想要的是使用第一个版本（委托版本）。

例如，您可以使用以下

代替当前代码

$(function(){
    $('#someParentElement').on('click','input[type="submit"]', function(e){
        $('#msg').append('<div>Clicked</div>');
        $('#panel').html('<input type="submit" value="New Button">').trigger('create');
    });
});

.on（）绑定在触发后不起作用（'create'）

2 个答案: