How to use javascript-created element as jQuery selector?

Question

I am using jQuery to create an html button with id "cancel". On my actual page, clicking my #edit button will successfully create my cancel button. However I am unable to then use this cancel button for future jQuery actions. Is there a solution to this?

$(document).ready(function() {
  $("#edit").click(function() {
    $("#button").html("<input id='cancel' type='button' value='cancel' />");
  });
  
  // Here I want to access my new button
  
  $("#cancel").click(function() {
    ('p').hide();  
  });
    
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span id='button'><input id='edit' type='button' value=edit /></span>
<p>Hide me upon cancel</p>

Yes, it's called event delegation

billyonecan
– billyonecan

2015-08-10 14:57:08 +00:00
Commented Aug 10, 2015 at 14:57 — billyonecan
– billyonecan, Commented Aug 10, 2015 at 14:57

Milind Anantwar · Accepted Answer · 2015-08-10 15:04:22Z

3

Yes. event delegation

Event delegation allows us to attach a single event listener, to a parent element, that will fire for all descendants matching a selector, whether those descendants exist now or are added in the future.

You are also missing jquery selector while targeting p elements.

 $("#button").on('click','#cancel',function() {
   $('p').hide();  
 });

edited Aug 10, 2015 at 15:04

answered Aug 10, 2015 at 14:57

Milind Anantwar

82.3k26 gold badges97 silver badges128 bronze badges

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

4 Comments

Tortooga Over a year ago

Thanks, exactly what I needed. And for catching the typo :)

Milind Anantwar Over a year ago

@Tortooga: glad it helps

Tortooga Over a year ago

As a bit of a follow up question... what if I want clicking "cancel" to cause the button to revert back to a functioning "edit" button? I tried to store the contents of the original #button as a variable, and then reassign #button after clicking cancel. But this puts me back at my original issue where the button cannot be selected by jQuery.

Milind Anantwar Over a year ago

for that you will need to delegate #edit event. exactly the same way done for cancel button

Collectives™ on Stack Overflow

How to use javascript-created element as jQuery selector?

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related