Click event is called more than once in jQuery

Question

I have following code. In this code first I am adding input field and button to #container. Then I attach click event to the button.confirm. When it is clicked on the first time, it invokes initConfirm method. Inside initConfirm, I changed the text of a button to Show and remove the class confirm and add class show to this button. Then I attach another click event to button.show and it invokes initShow method upon click. Inside initShow method I am just logging a message.

Problem

The problem this code is when I click on the button.confirm button for the first time, it shows, it changes the text of the button to show and changes the class from confirm to show and attach click event to button.show. It also logs out initConfirm once. Which is correct. Now when I click on the button with class show then again it invokes initConfirm method first then invokes initShow method. When I click on this button again. Then again it first invokes initConfirm first and then initShow twice. This continues when I click this method as many times. Below is the screenshot of my console.

enter image description here

What I want

I want this code to work like this. When user clicks on .confirm button on the first time then it should invoke initConfirm method. When user clicks on .show button then it should invoke initShow method and after that it should keep invoking initShow method once every time I click on .show button.

Here is my code

(function () {
    $('#container').append('<input type="text"><button class="confirm" type="button">Confirm</button>');

    $('.confirm').on('click', initConfirm);

    function initConfirm() {
        $('.confirm').text('Show');
        $('.confirm').removeClass('confirm').addClass('show');
        $('.show').on('click', initShow);
        console.log('initConfirm');
    }

    function initShow () {
        console.log('initShow');
    }
})();

Here is jsfiddle

JSFIDDLE

A. Wolff · Accepted Answer · 2013-12-23 10:22:11Z

1

You should take advantage of delegation:

DEMO

function initConfirm() {
    $(this).text('Show')
        .toggleClass('confirm show');
    console.log('initConfirm');
}

function initShow() {
    console.log('initShow');
}
$('#container').on('click', '.confirm', initConfirm)
    .on('click', '.show', initShow);

answered Dec 23, 2013 at 10:22

A. Wolff

74.4k9 gold badges98 silver badges158 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

codingrose · Accepted Answer · 2013-12-23 10:18:39Z

0

click event for .show is called as many times as initConfirm() is called.

Move

$('.show').on('click', initShow);

out of initConfirm().

Code:

$('#container').append('<input type="text"><button class="confirm" type="button">Confirm</button>');

$('.confirm').on('click', initConfirm);
$('.show').on('click', initShow);

function initConfirm() {
    $('.confirm').text('Show');
    $('.confirm').removeClass('confirm').addClass('show');
    console.log('initConfirm');
}

function initShow() {
    console.log('initShow');
}

Updated fiddle here.

answered Dec 23, 2013 at 10:18

codingrose

15.7k11 gold badges41 silver badges58 bronze badges

Comments

Aashray · Accepted Answer · 2013-12-23 10:25:33Z

0

The problem was the initConfirm was still attached to the button. I have made the required changes:

http://jsfiddle.net/cfS2x/5/

answered Dec 23, 2013 at 10:25

Aashray

2,76118 silver badges23 bronze badges

Collectives™ on Stack Overflow

Click event is called more than once in jQuery

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related