CODEWITHSUNDEEP
javascriptjqueryeventsjquery-events
Om3ga
Om3ga

Reputation: 32823

Click event is called more than once in jQuery

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

Upvotes: 0

Views: 466

Answers (3)

Aashray
Aashray

Reputation: 2753

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

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

Upvotes: 0

A. Wolff
A. Wolff

Reputation: 74420

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);

Upvotes: 1

codingrose
codingrose

Reputation: 15699

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.

Upvotes: 0

Related Questions