Javascript点击事件触发多次？

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')) 
      }); 
     } 
    }, 
}; 

我觉得奇怪的是，当我不点击相同的输入两次它只运行一次。举例来说，如果我点击“男”，然后“女”它会显示在控制台

(1) male 
(2) female 

这在逻辑上是有意义的我，如果我点击“男性” 5次，然后我得到

(14) male 

它只是越来越大。

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

Answer 1

发生了什么事是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 2

绑定一个单一的点击事件，如果调用此多的时间，然后第一个再次取出单击事件和追加或使用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 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

您添加多个点击事件，以相同的元素就是为什么你会得到多个控制台.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')) 
      }); 
     } 
     }, 
    };