JQUERY event firing more than one time, when using delegate jquery

Question

I am using delegate jquery in my code, but when it fire some event it fire more than once, I know It is because i have bind the event of optionclicked class to the boxes-main class but i am in a situation that i have to bind these classes with each other, because the content that using optionclicked class is generating dynamically. Is there ay solution to the problem so that event fire only once means it call function once and show pop op once and post data once etc etc.

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

Can you please elaborate on _but when it fire some event it fire more than once_? — Guruprasad J Rao, Nov 19 '15 at 08:08
Are your elements dynamically generated? if not then you don't need to use event delegation, or this might be the issue of event propagation. — Jai, Nov 19 '15 at 08:10
this is basically a quiz page in which question and answer are loded dynamically, in boxes-main class and the option have the class name optionclicked and when i click on the option i want to fire the event but it fire more than once — Naveen Singh, Nov 19 '15 at 08:12

score 1 · Answer 1 · answered Nov 19 '15 at 10:17

1

I had a similar problem.

try changing your code to:

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

This removes all click events and adds a single event.

When I looked into this, the click event was firing twice, even though the click event was only added once.

I can't find the original SO post that helped me, but this worked for me.

answered Nov 19 '15 at 10:17

Karl Gjertsen

4,690
8
41
64

Sory sir this doesnt work for me, the problem remains to be same – Naveen Singh Nov 19 '15 at 10:35

score 1 · Accepted Answer · answered Jan 13 '16 at 12:46

1

I binded the click event with an variable named event and added the code

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

this one solved my problem.

answered Jan 13 '16 at 12:46

Naveen Singh

395
1
3
17

score 1 · Answer 3 · answered Aug 13 '18 at 10:03

1

try to use :

event.stopPropagation();

it stops the propogation

answered Aug 13 '18 at 10:03

sonishubham65

99
2
8

JQUERY event firing more than one time, when using delegate jquery

3 Answers3