Javascript 点击事件多次触发？

为什么我的函数运行多次？

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

而且它变得越来越大。

EDIT: JSFiddle https://jsfiddle.net/j1gbzut6/如果你打开控制台你可以看到发生了什么

发生的事情是这样的getInput为每个点击事件调用，这意味着每次都会运行循环，再次注册事件。因此，每次单击单选按钮时，循环都会再次将事件附加到 DOM 元素。您应该只注册该活动一次: https://jsfiddle.net/2jbLdo9n/ 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();