Question

我正在尝试减少JQUERY中的重复代码，但无法弄清楚如何从“on-＆gt; click”函数调用我的函数。

我的功能如下：

function myCheckAll(div, closer, finder){
    console.log(div+closer+finder);

      $(div).closest(closer).find(finder).prop('checked', this.checked); 
  }

我试图用这样的东西来称呼它

  $("#check_all_0").on('click', myCheckAll("#check_all_0", "table", "input#val0"));

我的问题是它不起作用。我不明白的是：

1）我在文档就绪括号之外定义了函数。这是我应该定义它的地方吗？

2）加载页面后立即调用控制台日志。没有单击目标，如果我单击目标它不会调用该函数。

我是jquery的新手，我可能做了一些完全错误的事情，但我会感激任何帮助。谢谢。

Answer 1

您可以使用闭包：

$("#check_all_0").on('click', function() {
    myCheckAll("#check_all_0", "table", "input#val0");
});

Answer 2

 $("#check_all_0").on('click', myCheckAll("#check_all_0", "table", "input#val0"));

这将导致首先调用myCheckAll，并将结果作为事件处理程序传递给jQuery。你必须用一个函数包装它：

$("#check_all_0").on('click', function() {
    myCheckAll("#check_all_0", "table", "input#val0"));
})

另见documentation

Answer 3

虽然其他答案正在发挥作用，但我相信你正在寻找类似的东西：

$("input").on('click', {name: 'me'}, func);

function func(event) {
    console.log(event.data.name);
}

改编自您的代码：

$("#check_all_0").on('click', {div: "#check_all_0", closer: "table", finder:  "input#val0"}, myCheckAll);

function myCheckAll(event){
    console.log(event.data.div);
    console.log(event.data.closer);
    console.log(event.data.finder);
    $(event.data.div).closest(event.data.closer).find(avent.data.finder).prop('checked', this.checked); 
}

演示：http://jsfiddle.net/nabil_kadimi/sdMQ2/

Answer 4

我不确定你要做什么，但它看起来像是一个检查所有功能，虽然这不是你的问题的答案。这可能有所帮助。

$('#check_all_0').on('click',function(e){
   $(this).closest('table').find(':checkbox').prop('checked',$(this).prop('checked'));
});

如果没有看到HTML，就无法知道这是否正确，但是您正在使用DOM ID找到可能不是最佳方式的东西。

点击即可从JQUERY调用我的函数

4 个答案: