Question

为了澄清这个问题，让我举一个例子如下我有三个<div>元素，如下所示：

  <div id="fail-item" class="toolbar-item">
  Fail
  </div>
  <div id="warn-item" class="toolbar-item">
  Warn
  </div>
  <div id="pass-item" class="toolbar-item">
  Pass
  </div>

我为Jquery列出的每个<div>添加了点击监听器，如下所示：

<body>
  <script>
    $("div.toolbar-item").click(toolbar_click_listener());

    function toolbar_click_listener(){
        console.log("what happens");
    }   
  </script>
</body>

然而，我可以看到＆＃34;会发生什么＆＃34;在我加载页面时只打印一次，对<div>元素的任何进一步点击事件根本不起作用。

我搜索了SO但未能得到答案。你知道这里有什么问题吗？

Answer 1

不带括号使用：

$("div.toolbar-item").click(toolbar_click_listener);

您也可以通过

轻松完成此操作

$("div.toolbar-item").click(function(){
  console.log("what happens");
});

Answer 2

它应该是处理程序中的函数引用而不是函数调用。

不应在页面加载时调用您的单击处理程序。它正在发生，因为你在这里调用它.click(toolbar_click_listener());你不会想要它。

如果要为事件分配处理程序。您可以参考该函数而不是调用它。

将其更改为.click(toolbar_click_listener);，您将看到预期的行为

$("div.toolbar-item").click(toolbar_click_listener);

    function toolbar_click_listener(){
        console.log("what happens");
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="fail-item" class="toolbar-item">
  Fail
  </div>
  <div id="warn-item" class="toolbar-item">
  Warn
  </div>
  <div id="pass-item" class="toolbar-item">
  Pass
  </div>

Answer 3

只传递toolbar_click_listener中click函数的引用。

<body>
  <script>
    $("div.toolbar-item").click(toolbar_click_listener);

    function toolbar_click_listener(){
        console.log("what happens");
    }   
  </script>
</body>

Answer 4

Working Fiddle

HTML：

 <div id="fail-item" class="toolbar-item">
  Fail
  </div>
  <div id="warn-item" class="toolbar-item">
  Warn
  </div>
  <div id="pass-item" class="toolbar-item">
  Pass
  </div>

JS：

$("div.toolbar-item").on("click",toolbar_click_listener);

    function toolbar_click_listener(){
        console.log("what happens");
    }

为什么单击jquery只能在加载页面时工作一次

4 个答案: