2

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

我用一些内容更新了一个 JQM面板，并在该内容上调用 .trigger('create')。应该发生的是，新创建的提交按钮在单击时应该触发绑定的单击事件，但事实并非如此。

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

$(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') 时调用该函数......但这似乎效率低下。

4

2 回答 2

3

你需要

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

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

$('input[type="submit"]').bind('click', function(e){
   //handler
});
于 2013-02-15T01:26:32.667 回答
2

使用.on方法绑定事件有两种方法。一种是使用事件委托，它将事件绑定到更高级别的元素（一直到document必要时，但越接近越好），然后当事件冒泡时，它会监听它，如果它匹配传入的选择器它着火了。第二种使用方式.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');
    });
});
于 2013-02-15T01:29:40.453 回答