Question

情况就是这样......

我有多个按钮，类.delete-rule

我有一个与该类绑定的点击事件：

$('.delete-rule').click(function(){
    // do stuff
});

问题：当我trigger该类上的点击事件时，唯一触发的事件是第一个按钮上的点击事件 - 后续按钮的点击事件都没有触发

当我打电话时，如何触发.delete-rule课程的所有按钮：

$('.delete-rule').trigger('click')？

Answer 1

已更新，适用于动态添加的元素。

有几种方法可以做到这一点：DEMO

$(document).on('click', '.delete-rule', function(){
    $('.delete-rule').animate({'left': '200px'}, 200);
});

或

$('.delete-rule').click(function(){
    $('.delete-rule').each(function() {
        //Do Stuff
    });
});

或

var deleteRule = function(){
    //Do Stuff
};

$('.delete-rule').click(deleteRule);

$('.delete-rule').trigger('click');

您是否动态添加内容？您要做的任何其他信息将非常有用。希望这会有所帮助。

Answer 2

我不明白为什么需要each功能。如您所见，简单地连接click触发器就可以了。

默认背景颜色为蓝色，但点击事件将其交换为红色。如你所见，所有元素都是红色的，而不仅仅是第一个元素。

http://jsfiddle.net/748z0yn6/

$('.delete-rule').click(function(){
    $(this).css({"background-color": "red"});
}).click();

Answer 3

除非您使用新元素更新DOM或将嵌套元素与stopProgation一起使用，否则您的示例应该有效。

请参阅我的demo，我使用on绑定点击事件处理程序以启用DOM操作。

$('body').append('<button class="delete-rule">D</button>');

$(document).on('click', '.delete-rule', function(event) {
    event.preventDefault();
    console.log(event.type, $(this).val(), 'Do stuff');
});


setTimeout(function() {
    $('.delete-rule').click(); // tigger('click')
}, 3000);

触发器单击所有带有类的元素

3 个答案: