Question

我有一个带框的页面，我希望在每个框中单击时运行一个函数。另外，我希望该函数在页面加载时运行ONCE。

（想法是函数“更新状态”，我想在每次点击时更新，但也要在页面加载时更新 - 以初始化状态，可以这么说。）

通常情况下，我这样做：

$('.box').click(function() {
    // do something
}).first().click();

所以我将处理程序附加到每个.box点击事件，然后我获得第一个.box元素并触发其上的click事件。

这种方法有效，但感觉有点笨拙。你是如何解决这个问题的？

Answer 1

jQuery有triggerHandler()^(docs)，它提供了代码可能需要的许多优点。

$('.box').click(function() {
    // do something
}).triggerHandler('click');

来自文档：


.triggerHandler()方法不会导致事件的默认行为（例如表单提交）。

虽然.trigger()将对jQuery对象匹配的所有元素进行操作，但.triggerHandler() 仅影响第一个匹配的元素。

使用.triggerHandler()创建的事件不会冒泡DOM层次结构;如果他们没有被目标元素直接处理，他们什么都不做。

.triggerHandler()不返回jQuery对象（允许链接），而是返回它导致执行的最后一个处理程序返回的任何值。如果没有触发处理程序，则返回undefined

Answer 2

这就是我可能会这样做的。

(function(){
    var foo = function(){
              // stuff
           }
    $('.box').click(foo);
    foo();
})();

初始化时调用foo并将其添加到点击中。

Answer 3

这样的事情也可以起作用：

$(document).ready(function($) {
    $('.box').click(function() {
        $(this).val("Value"); //Your function here
    });

    $('.box').each(function() {
      $(this).val("Ready"); //Your function here
    });    
});

Demo

Answer 4

function hello() {
    //Here goes your update function
    alert('world');
}

$('.box').click(hello);
hello();

在每个项目点击时执行功能，但也在页面加载时执行一次

4 个答案: