Question

我正在开发弹出按钮，所以我设计了代码

$(event.target).click(function() { window.open("/widget/dialog", "", ""); });

然而，当我第一次点击时它不起作用。我第二次点击时效果很好。我怎么解决这个问题？

Answer 1

但是，当我第一次点击时它不起作用。

那是因为第一次执行处理程序时，绑定（不执行！）调用window.open("/widget/dialog", "", "")的另一个事件处理程序。

现在您有两个事件处理程序绑定到该元素，并且当您再次单击时将执行这两个事件处理程序。但这也意味着另一个事件处理程序将被绑定，因此在第二次单击后，三个事件处理程序将绑定到该元素。

如果您希望它“第一次”工作，那么在“外部”事件处理程序中执行您想要执行的操作。不要在处理程序中绑定另一个事件处理程序。忘掉$(event.target).click(...)。

Template.Button.events({
  'click button': function(event, template) {
    window.open("/widget/dialog", "");
  },
});

Answer 2

第三次点击时打开2个窗口？（可能被浏览器阻止）然后你就不能理解什么是事件监听器。

我猜您的代码是这样的:(因为代码片段不允许弹出窗口，我使用console.log显示）

＆＃13;

$(function() {
  $("#hh").click(function() {
    $(event.target).click(function() {
      console.log("Hello!");
    });
  })
})

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="hh" type="button" value="google" />

＆＃13;

如果是这样，你就会遇到麻烦，因为你在事件监听器中绑定事件监听器。

详细说来，我先说一下名字：外$("#hh").click叫做ELA（事件监听器A），而内$(event.target).click是ELB。

请参阅？这会导致恐怖。

正确的方法是：

＆＃13;

$(function() {
  $("#hh").click(function() {
    console.log("Hello!");
  })
})

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="hh" type="button" value="google" />

＆＃13;

每次点击都会生成一个console.log。

Answer 3

尝试使用以下示例。
希望这会有所帮助。我已将.target移至活动

JQUERY

var event = $('a');

$(event).click(function() {
  window.open("/widget/dialog", "", "");
});

HTML

<a href="#">Click Here</a>