使用委托 jquery 时，JQUERY 事件触发不止一次答案

【问题标题】：JQUERY event firing more than one time, when using delegate jquery使用委托 jquery 时，JQUERY 事件触发不止一次
【发布时间】：2015-11-19 08:03:43
【问题描述】：

我在我的代码中使用委托 jquery，但是当它触发某些事件时它会触发多次，我知道这是因为我已将 optionclicked 类的事件绑定到 boxes -main 类，但我必须将这些类相互绑定，因为使用 optionclicked 类的内容是动态生成的。是否有解决该问题的方法，以便事件仅触发一次意味着它调用一次函数并显示一次弹出操作并发布一次数据等。

$('.boxes-main').on('click', '.optionclicked', function(){
    // do something
    var timetoclick = parseFloat($('#time').text());
    clearInterval(myCounter);
    var optionclicked = $(this).attr('data');
    var questionid = $(this).attr('data2');
    $.post("quesanscheck.php", {
        ans : optionclicked,
        id : questionid,
        time : timetoclick
    }, function(data, status) {
        alert(data);
        if(data == optionclicked)
        {
            //alert("dfad");
            setTimeout(function(){ rightans(); }, 1000);
        }
        else
        {
            // wrong ans red
            if(optionclicked == 'A')
            {
                document.getElementById('op1').style.background = "red";
                document.getElementById('op1').style.border = "0px";
            }
            if(optionclicked == 'B')
            {
                document.getElementById('op2').style.background = "red";
                document.getElementById('op2').style.border = "0px";
            }
            if(optionclicked == 'C')
            {
                document.getElementById('op3').style.background = "red";
                document.getElementById('op3').style.border = "0px";
            }
            if(optionclicked == 'D')
            {
                document.getElementById('op4').style.background = "red";
                document.getElementById('op4').style.border = "0px";
            }
            // right ans green
            if(data == 'A')
            {
                document.getElementById('op1').style.background = "green";
                document.getElementById('op1').style.color = "white";
                document.getElementById('op1').style.border = "0px";
            }
            if(data == 'B')
            {
                document.getElementById('op2').style.background = "green";
                document.getElementById('op2').style.color = "white";
                document.getElementById('op2').style.border = "0px";
            }
            if(data == 'C')
            {
                document.getElementById('op3').style.background = "green";
                document.getElementById('op3').style.color = "white";
                document.getElementById('op3').style.border = "0px";
            }
            if(data == 'D')
            {
                document.getElementById('op4').style.background = "green";
                document.getElementById('op4').style.color = "white";
                document.getElementById('op4').style.border = "0px";
            }
            setTimeout(function(){wrongans();}, 1000);
        }
    });
});

【问题讨论】：

你能详细说明一下但是当它触发某些事件时，它会触发不止一次？
请在 JSFiddle 重现此问题。
你的元素是动态生成的吗？如果不是，那么您不需要使用事件委托，否则这可能是事件传播的问题。
这基本上是一个测验页面，其中问题和答案是动态加载的，在 box-main 类中，选项有类名 optionclicked，当我单击该选项时，我想触发事件但是它不止一次触发

标签： javascript jquery delegates jquery-delegate

【解决方案1】：

我也遇到过类似的问题。

尝试将您的代码更改为：

$('.boxes-main').unbind('click').on('click', '.optionclicked', function(){

这会删除所有点击事件并添加一个事件。

当我查看这个时，点击事件触发了两次，即使点击事件只添加了一次。

我找不到对我有帮助的原始 SO 帖子，但这对我有用。

【讨论】：

对不起先生，这对我不起作用，问题仍然存在

【解决方案2】：

我用一个名为event的变量绑定了点击事件并添加了代码

event.stopPropagation();
 event.preventDefault();

这个解决了我的问题。

【讨论】：

【解决方案3】：

尝试使用：

event.stopPropagation();

它停止传播

【讨论】：