jQuery .click() trigger event on non-existent html element

Question

I have an HTML button with an ID of "open". I have added a jQuery .click() binding to the HTML button which is selected by ID. In the .click() binding I change the ID of "open" to "close". However, subsequent clicks on the "open" button are still firing even though the ID has been changed to "close". The code is as follows:

index.html

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
    <button id="open">Open</button>

    <script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
    <script type="text/javascript" src="js/index.js"></script>
</body>
</html>

index.js

$('#open').click(function() {
    console.log("clicked");
    $(this).attr('id', 'close');
});

https://jsfiddle.net/iHexBot/28tj1ywg/

I was expecting / hoping to see the console log "clicked" only one time. However, it logs "clicked" every time the button is clicked even though the HTML elements ID is no longer "open". Could someone please explain to me why this happens and if possible, how to fix this?

You must bind your event again, or use delegation with a function like on() — FLX
– FLX, Commented Nov 2, 2015 at 15:04
Are you then going to bind to $("#close") and do a close function? Or are you only doing this so that the event is only triggered once? — Dhunt
– Dhunt, Commented Nov 2, 2015 at 15:07

steven35 · Accepted Answer · 2015-11-02 15:16:05Z

2

You can bind the event to document instead of the element like so

$(document).on('click', '#open', function() {
    console.log('this will only be displayed as long as id is "open"');
});

answered Nov 2, 2015 at 15:16

steven35

4,0676 gold badges40 silver badges50 bronze badges

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

Comments

Dhunt · Accepted Answer · 2015-11-02 15:17:46Z

2

If you only want to trigger once I would try this:

$('#open').one("click", function() {
    console.log("clicked");
    $(this).attr('id', 'close');
});

but if you are creating a 'toggle' button I wouldn't do it this way. I would create one event that will act differently depending on whether it should be opening or closing, as other answer here suggest.

edited Nov 2, 2015 at 15:17

answered Nov 2, 2015 at 15:08

Dhunt

1,5949 silver badges22 bronze badges

Comments

Viktor Maksimov · Accepted Answer · 2015-11-02 15:10:24Z

1

Use this script instead:

$('#open').bind('click', function() {
    console.log("clicked");
    $(this).attr('id', 'close').unbind('click');
});

answered Nov 2, 2015 at 15:10

Viktor Maksimov

1,4651 gold badge10 silver badges11 bronze badges

Comments

MakeLoveNotWar · Accepted Answer · 2015-11-02 15:14:07Z

1

Here is the code to toggle between open and close

<button class="toggleButton" data-option="open">Open</button>

$(document).on('click','.toggleButton',function() {
 if($(this).attr('data-option') == 'open') {
  console.log('open');
  // do something if "open" clicked;
  $(this).text('Close');
  $(this).attr('data-option','close');
 }else{
  console.log('close');
  // do something if "close" clicked;
  $(this).text('Open');
  $(this).attr('data-option','open');    
 }
});

jsfiddle - https://jsfiddle.net/ygf1327m/

answered Nov 2, 2015 at 15:14

MakeLoveNotWar

9549 silver badges26 bronze badges

Comments

Jean G.T · Accepted Answer · 2015-11-02 18:27:45Z

For this purpose you "should" use ONE() rather than to unbind. Just to demonstrate this I have edited your original JSFIDDLE.

   jQuery(document).ready(function ($) 
    {  
    //the element to evaluate
     var current_id= $("button#open");
     alert("The ID of the button is: " + current_id.attr("id") );
     current_id.one("click", function () {  
     //now once we click the button we have
     current_id.attr('id', 'close');
     alert("Now the ID is: " + current_id.attr('id') + "  so we are changing it\'s text too...  "  );
     //reflect the change
     current_id.text("Close");     
     });
    });

JSFIDDLE:
https://jsfiddle.net/28tj1ywg/4/

Stewartside · Accepted Answer · 2015-11-02 15:08:10Z

0

jQuery will bind a .click() event on the browser load instead of re-binding it after each click.

You're going to want to .unbind() this event which should sort your issue out.

$('#open').click(function() {
  console.log("clicked");
  $(this).attr('id', 'close');
  $(this).unbind();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="open">Open</button>

.unbind() | jQuery

answered Nov 2, 2015 at 15:08

Stewartside

21k13 gold badges64 silver badges82 bronze badges

Comments

Community · Accepted Answer · 2017-05-23 10:29:21Z

0

The reason is that while executing the event handler its context (i.e. 'this' object) is different to the defining context. See also How do I pass the this context into an event handler?

edited May 23, 2017 at 10:29

CommunityBot

11 silver badge

answered Nov 2, 2015 at 15:11

Gunther Rotsch

1553 bronze badges

Collectives™ on Stack Overflow

jQuery .click() trigger event on non-existent html element

7 Answers 7

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related