jQuery - how to destroy/unbind click event

Question

In my application, i have calendar icon so when it is clicked the calendar pop up shows.

So, I have the following jQuery code which hides the section when i clicked anywhere of <Div> matching with css class.

<script>
$(document).ready(function(){
    $(".myContent").click(function () {
        $(".calendar").hide();
    });
});
</script>

However, the issue i am facing is it works fine for the first time

i.e. Click on Calendar Icon shows calendar popup.. than click on anywhere inside Div hides calendar pop-up.

However, When i reclick on Calendar icon than it does not show calendar popup unless i refresh the whole page.

I am guessing that i need to unbind click event but not sure how... Any help please?

try http://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements — Arun P Johny, May 22 '15 at 11:51
I see that you `hide` the calendar, when you display it again? — adricadar, May 22 '15 at 11:52
Is the calendar icon inside `.myContent`? Then use `event.stopPropagation` to keep the click event from bubbling out to the container. — Barmar, May 22 '15 at 11:57
add this condition if($(".calendar").is(':visible')){ $(".calendar").hide(); } — Nishit Maheta, May 22 '15 at 11:57
@Barmar Yes you are absolutely right. this calendar icon is inside .myContent. How and where i can use event.stopPropagation in my code? please advise — immirza, May 22 '15 at 11:58
as @Barmar suggested add click event with `event.stopPropagation ` on calendar icon .. m i right Barmar? — Nishit Maheta, May 22 '15 at 12:00
You're going to have to provide more code, maybe an executable stack snippet or jsfiddle, so we can understand what's going on. As currently written, this question is not answerable. — Barmar, May 22 '15 at 15:27

score 2 · Answer 1 · answered May 22 '15 at 12:03

2

Use event.stopPropagation to keep the click on the calendar icon from bubbling out to .myContent:

$("#calendar_icon").click(function(e) {
    e.stopPropagation();
    $(".calendar").show();
});

answered May 22 '15 at 12:03

Barmar

669,327
51
454
560

What is #calendar_icon in your example? – immirza May 22 '15 at 12:06
It's the ID of the calendar icon that you click on to display the calendar. – Barmar May 22 '15 at 12:07
I already have stopPropagation() in my html line – immirza May 22 '15 at 12:15
stopPropagation() still not solved my issue.. not sure im using it in righ way or not.. – immirza May 22 '15 at 13:05
I don't know Angular, so I can't help you with that. – Barmar May 22 '15 at 15:22

score 1 · Answer 2 · answered May 22 '15 at 11:52

1

To unbind You can use off like:

$(".myContent").off('click');

Please refer: jQuery Documentation for more details.

answered May 22 '15 at 11:52

madoxdev

3,452
1
22
39

score 0 · Answer 3 · answered May 22 '15 at 11:52

0

You can use off.

var handler = function(){ /* whatever */ };
$(selector).on('click', handler);
$(selector).off('click', handler);

Alternatively if you only want it to happen at most one time...

$(selector).one('click', function(){ /* whatever */});

answered May 22 '15 at 11:52

Taplar

24,556
4
20
34

I don't think he really needs to unbind the handler, I think it's an XY problem. – Barmar May 22 '15 at 11:55

score 0 · Answer 4 · answered May 22 '15 at 11:52

0

Try:

<script>
$(document).ready(function(){
    $('body').on('click', '.myContent', function() {
        $(".calendar").hide();
    });
});
</script>

answered May 22 '15 at 11:52

Alliswell

1,425
19
34

score 0 · Answer 5 · answered May 23 '15 at 00:05

Not sure about your angularjs but try this:

$(document).ready(function(){
     $(document).on("click", ".myContent, function () {
           $(".calendar").hide();
     });

     $("#CalendarSettings").on("click", function()  {
           $(".calendar").show();
     });
  });

jQuery - how to destroy/unbind click event

5 Answers5