CODEWITHSUNDEEP
javascriptjqueryhtmlcss
user3400389
user3400389

Reputation: 367

Click inside click function causing alert message showing more than once - Jquery/Javascript

My question is little hard to explain so i have made a jsfiddle. The problem is that. when i click on <li> first time, i get 1 alert message.

Now i again click on any <li>, now what i am getting 2 alerts.

First click on any input field --> then li --> then input field again --> then li again.

Markup:

<input type='text' class='InputField'>
<input type='text' class='InputField2'>
<input type='text' class='InputField3'>
<div class="ranges FullBoxControl" style='display:none'>
    <ul>
        <li>This Month</li>
        <li>This Year</li>
        <li>Last 5 Years</li>
        <li>Last 10 Years</li>
        <li>Custom Range</li>
    </ul>
</div>

Script code:

$(".InputField").click(function()
{
    $('.FullBoxControl').show();
    $('.FullBoxControl').click(function()
    {
        alert('Greetings');
    });
});

$(".InputField2").click(function()
{
    $('.FullBoxControl').show();
    $('.FullBoxControl').click(function()
    {
        alert('Greetings');
    });
});

$(".InputField3").click(function()
{
    $('.FullBoxControl').show();
    $('.FullBoxControl').click(function()
    {
        alert('Greetings');
    });
});

JsFiddle Demo

Ask me if you people didn't get it.

Upvotes: 0

Views: 529

Answers (3)

Dave
Dave

Reputation: 4436

Refer jsfiddle. Each time you click in input field, it binds click event, so it is necessary to put repetitive code in common function and unbind click event, before binding click event again.

$(".InputField").click(function()
{
    fullbox();
});

$(".InputField2").click(function()
{
    fullbox();
});

$(".InputField3").click(function()
{
    fullbox();
});
function fullbox(){
    $('.FullBoxControl').show();
    $('.FullBoxControl').unbind("click");
    $('.FullBoxControl').click(function()
    {
        alert('Greetings');
    });
}

Upvotes: 1

Jonas Grumann
Jonas Grumann

Reputation: 10786

Set a flag to see if you have already attached the click event:

http://jsfiddle.net/x85A6/6/

var eventAttached = false;

$(".InputField").click(function() {
    if (!eventAttached) {
        $('.FullBoxControl').show();
        $('.FullBoxControl').click(function(){
            alert('Greetings');
        });
        eventAttached = true;
    }
});

$(".InputField2").click(function() {
    if (!eventAttached) {
        $('.FullBoxControl').show();
        $('.FullBoxControl').click(function(){
            alert('Greetings');
        });
        eventAttached = true;
    }
});

$(".InputField3").click(function() {
     if (!eventAttached) {
        $('.FullBoxControl').show();
        $('.FullBoxControl').click(function(){
            alert('Greetings');
        });
        eventAttached = true;
    }
});

Upvotes: 0

Eun
Eun

Reputation: 4178

Use unbind to remove the double event handler

$(".InputField").click(function()
{ 
    $('.FullBoxControl').show();
    $('.FullBoxControl').unbind();
    $('.FullBoxControl').click(function()
    {
        alert('Greetings');
    });
});

Fiddle

Upvotes: 1

Related Questions