javascript - 使用委托(delegate)jquery时，JQUERY事件触发了多次

我在代码中使用了委托(delegate)jquery，但是当它触发某个事件时，它会多次触发，我知道这是因为我已经将 optionclicked 类的事件绑定(bind)到 box-main 类，但是我处于这种情况我必须彼此绑定(bind)这些类，因为使用 optionclicked 类的内容是动态生成的。
有没有解决问题的方法，所以事件只触发一次就意味着它调用一次函数，一次显示pop op并一次发布数据，等等。

$('.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);
        }
    });
});

最佳答案

我有一个类似的问题。

尝试将您的代码更改为:

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

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

当我调查此事件时，即使单击事件仅添加一次，单击事件也会触发两次。

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

关于javascript - 使用委托(delegate)jquery时，JQUERY事件触发了多次，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/33798233/