Adding a click event within a another function

Question

This has been bugging me way too long. I am trying to create a click event within a function, which doesn’t seem to be working. Here is the basic layout:

function init() {

$('#a2').click(function() {
//does some stuff. Works fine.

    $('#addDest').click(function() {
    //does more stuff. Works fine…
        if ($("#input2").is(':visible'))     
        {alert("test");};
     });
});
};

The page is always assuming #input2 is visible! Even though it is switching on and off. I check in Firebug and it is able to know the truth. However, when I click on #input2, the alert ALWAYS pops up! I could throw my problem part outside of the function. But that will create more problems – as I will have some undeclared variables when the document loads. I am thinking I made this the long way and maybe event handlers or clickevents are a solution for more. But I am not quite at that level of understanding yet. I know it is reading that problem area, as when the page loads. Is there an easier solution to this issue? I know I prolly need to learn more... Thanks a lot!!

So, every time you click on #a2, you want to reset the click event functionality on #addDest? Is that necessary? — Cᴏʀʏ
– Cᴏʀʏ, Commented Jul 18, 2012 at 21:06
yea - bc #addDest is hidden is hidden unless #a2 was clicked first. — Kyle
– Kyle, Commented Jul 18, 2012 at 21:10
And there are some objects created in #a2 which I don't want if it wasn't clicked — Kyle
– Kyle, Commented Jul 18, 2012 at 21:12

Mark Schultheiss · Accepted Answer · 2012-07-18 22:18:59Z

1

with this markup:

<button id="a2">A2</button>
<button id="addDest">Add</button>
<input type="text" id='input2'>

and this CSS:

#addDest,#input2{display:none;}

this works:

$('#a2').click(function() {
    $('#addDest').show();
});
$('#addDest').click(function() {
    if ($("#input2").is(':visible')) {
        alert("test");
    };
    $('#input2').show();
});

Explanation:

Makes the the assumption that all the elements exist, even if hidden.
Since it is hidden, you can add the click event for addDest outside the click event handler for a2, as it will not be clicked if it IS hidden to start.
in my example, the input2 is initially hidden, so you only see the alert on the second click (I show it in the first click event handler for addDest.)

If you change the

  $('#input2').show();

to:

$('#input2').toggle();

you can see it change based on the visibility of the input.

working example: http://jsfiddle.net/25Vfy/

edited Jul 18, 2012 at 22:18

answered Jul 18, 2012 at 22:11

Mark Schultheiss

34.3k13 gold badges75 silver badges116 bronze badges

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

1 Comment

Kyle Over a year ago

Thanks! I think my problem was the ordering of my CSS and JS. But that example really showed how to get it right. Thanks sooo much!

Rodolfo · Accepted Answer · 2012-07-18 21:14:07Z

0

the problem may be that the click event on #addDest is being bound over and over. Try doing a $('#addDest').unbind("click") before binding it

answered Jul 18, 2012 at 21:14

Rodolfo

4,19325 silver badges38 bronze badges

1 Comment

Kyle Over a year ago

hmmm. I tried throwing that in every possible location and it usually just removes the click function process. I am just confused bc if I throw "$("#input2").is(':visible')" in Firefox, it will say "false" if it's hidden. But then when I click #addDest, it is still always showing the alert.

Johnny Craig · Accepted Answer · 2012-07-18 21:50:17Z

0

you could attempt something like this

$('#a2').click(function() {
    $(this).attr('data-clicked','true'); 
});


$('#addDest').live('click', function() {

    if ($("#input2").is(':visible') && $('#a2').attr('data-clicked') == 'true')     
    {alert("test");};
 });

if you want it to only alert the first time it is clicked

$('#a2').click(function() {
    $(this).attr('data-clicked','true'); 
});

$('#addDest').live('click', function() {

    if ($("#input2").is(':visible') && $('#a2').attr('data-clicked') == 'true'){

           if($(this).attr('data-clicked') != 'true'){
              $(this).attr('data-clicked','true'); 
              alert("test");
           };
     }
});

edited Jul 18, 2012 at 21:50

answered Jul 18, 2012 at 21:34

Johnny Craig

4,9902 gold badges28 silver badges28 bronze badges

2 Comments

Kyle Over a year ago

it still is alerting me on every click. I am going to simplify my page and try these solutions without everything else I have going on. I'll let you know!

Johnny Craig Over a year ago

you want it to only alert one time?

Collectives™ on Stack Overflow

Adding a click event within a another function

3 Answers 3

1 Comment

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related