在jQuery模式中绑定并触发一个事件

Bind and trigger an event in jQuery pattern

本文关键字：事件 一个 模式 jQuery 绑定      更新时间：2023-09-26

通常我将事件与jQuery绑定，然后立即调用它，例如当我设置某些元素的定位或可见性时等等。

$('#myElement').on('click', function () {
    $('#myOtherElement').css('color', 'red');
}).click();

这是可行的，但模式有点难看，尤其是当我的第一个选择器找到多个元素时。然后，该事件被触发多次，第一个选择器找到的每个元素都触发一次。我最终这样做：

$('.lots-of-elements').on('click', function () {
    $('#myOtherElement').css('color', 'red');
}).first().click();

同样，这是有效的，但它不是我的最爱。有更好的模式可以使用吗？

我知道我可以做一些类似的事情：

function onClick() {
    $('#myOtherElement').css('color', 'red');
};
$('.lots-of-elements').on('click', onClick);
onClick();

但这更为冗长。

我不明白为什么要使用单击事件，然后立即单击它。你就不能把css编辑放在主作用域里吗？

对于您的问题，您还可以创建一个jQuery函数，如下所示：

$.fn.extend({
    clickColor: function(element, color) {
        $(this).on('click', function() {
            $(element).css('color', color);
        });
        return $(this);
    }
});

把它放在一个单独的文件中，只使用保持主文件的清洁

$('#clicker').clickColor('#other', 'red').click();
$('.clicker').clickColor('.another', '#00FF00').first().click();

请查看演示。

当然，如果你喜欢的话，你也可以把.first()和.click()放在函数里。

然后看看这个DEMO 2

相关文章：