Question

为什么我的功能会多次运行？

var s,
getData = {

    settings: {
        gender: $("input[name='gender']"),
        age: $("input[name='age']")
    },

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

    getInput: function() {
        for (i in s) {
            s[i].on("click", function() {
                s[i].off();
                console.log(this.getAttribute('value'))
            });
        }
    },
};

我觉得奇怪的是，当我不点击相同的输入两次时它只运行一次。例如，如果我点击男性＆＃39;然后是女性＆＃39;它会在控制台中显示

(1) male
(2) female

对我来说，如果我点击“男性”，这对我来说是有道理的。我得到5次

(14) male

它变得越来越大。

编辑： JSFiddle如果你打开控制台，你可以看到会发生什么

Answer 1

绑定单击事件，如果您多次调用此事件，请先删除点击事件并再次追加或使用one()

尝试以下方法：

var s,
getData = {

    settings: {
        gender: "input[name='gender']",
        age: "input[name='age']"
    },

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

    getInput: function() {

            $(s.gender+','+s.age).on("click", function() {
                console.log($(this).val());
            });
    },
};

删除点击事件并在文档准备就绪时启动呼叫

请参阅演示：https://jsfiddle.net/qzrfwc3g/

或以正常方式执行3行代码：

$("input[name='gender'],input[name='age']").on("click", function() {
     console.log($(this).val());
});

Answer 2

发生的事情是每次点击事件都会调用getInput，这意味着每次循环都在运行，再次注册事件。因此，每次单击单选按钮时，循环都会再次将事件附加到DOM元素。 您只应注册一次：https://jsfiddle.net/2jbLdo9n/

删除输入上的onclick事件：

<div class="right-item">
  <input id="male" type="radio" name="gender" value="male">
  <label class="left-m" for="male"><span></span> Male </label>
</div>
<div class="right-item">
  <input id="female" type="radio" name="gender" value="female">
  <label for="female"><span></span> Female </label>
</div>

然后在您的JavaScript中，只需致电getData.init();

getData.init();

Answer 3

我不知道你为什么要这样做，因为你编码，我认为这里有一个错误。

for (i in s) {
  s[i].on("click", function() {
      s[i].off();
      console.log(this.getAttribute('value'))
   });
}

您将i声明为全局，当事件触发时，i引用相同的值。您可以尝试这样做：

for (let i in s) {
      s[i].on("click", function() {
          s[i].off();
          console.log(this.getAttribute('value'))
       });
    }

Answer 4

您要将多个点击事件添加到同一个元素，以便您只需单击一次即可获得多个console.log。要解决此问题，只需在分配事件列表器之前添加条件。

var s,
    getData = {

      cacheDOM: {
        gender: $("input[name='gender']"),
        age: $("input[name='age']")
      },

      init: function() {
        if(!s){
            s = this.cacheDOM;
            this.getInput();
        }
      },

      getInput: function() {
        for (i in s) {
          s[i].on("click", function() {
            s[i].off();
            console.log(this.getAttribute('value'))
          });
        }
      },
    };

Javascript点击事件多次触发？

4 个答案: