Question

自从我开始将JavaScript构建为module pattern以来，我的部分点击事件不再有效。由于我的JavaScript的其他部分将HTML添加到DOM，因此我需要使用$('body').on('click')作为按钮。

这是我目前的模块：

var s,
MyApp = {    

  settings: {
    fooButton: $(".foo-button"),
    barButton: $(".bar-button")
  },    

  init: function() {
    s = this.settings;
    this.bindEvents();
  },    

  bindEvents: function() {
    // this works
    s.fooButton.on("click", function() {
      MyApp.clickButton("foo");
    });    

    // this does NOT work
    $('body').on('click', s.barButton, function (event) {
      MyApp.clickButton("bar");
    });
  },    

  clickButton: function(button) {
    console.log("You clicked " + button)
  }    

};

第一次点击活动正在运行，第二次点击活动没有。如何为JavaScript代码创建的元素绑定和事件？

Answer 1

如果您在JS中创建元素，则必须在创建元素后绑定事件。

所以将绑定事件放在一个函数中，然后在JS代码创建元素之后调用该函数。：）

Answer 2

委托事件时处理程序的第二个参数应为字符串。

在您的情况下，它是 jQuery对象。这是您的点击事件无法正常工作的根本原因。

更改

barButton: $(".bar-button")

到

barButton: ".bar-button"

Answer 3

使用.on()进行事件委派时，第二个参数必须是字符串。传递任何其他东西都不会起作用。

http://api.jquery.com/on/#on-events-selector-data

在我的JavaScript模块中绑定click事件

3 个答案: