185

I've been having a lot of trouble attaching the click event to a JQuery object before adding it to the DOM.

Basically I have this button that my function returns, then I append it to the DOM. What I want is to return the button with its own click handler. I don't want to select it from the DOM to attach the handler.

My code is this:

createMyButton = function(data) {

  var button = $('<div id="my-button"></div>')
    .css({
       'display' : 'inline',
       'padding' : '0px 2px 2px 0px',
       'cursor' : 'pointer'
     }).append($('<a>').attr({
       //'href' : Share.serializeJson(data),
       'target' : '_blank',
       'rel' : 'nofollow'
     }).append($('<image src="css/images/Facebook-icon.png">').css({
       "padding-top" : "0px",
       "margin-top" : "0px",
       "margin-bottom" : "0px"
     })));

     button.click(function () {
        console.log("asdfasdf");
     });

     return button;     
}

The button that is return is unable to catch the click event. However, if I do this (after the button is added to the DOM):

$('#my-button').click(function () {
    console.log("yeahhhh!!! but this doesn't work for me :(");
});

It works... but not for me, not what I want.

It seems to be related to the fact that the object is not yet a part of the DOM.

Oh! By the way, I'm working with OpenLayers, and the DOM object that I'm appending the button to is an OpenLayers.FramedCloud (Which is not yet a part of the DOM but will be once a couple of events are triggered.)

Improve this question
5
  • Look into jquery's .on() It's for attaching event handlers at runtime Commented Jun 6, 2012 at 18:58
  • 1
    Maybe try binding click on creation of the element? Commented Jun 6, 2012 at 19:00
  • @AndrewPeacock what do you mean by binding click on creation? Commented Jun 6, 2012 at 19:41
  • @danielrvt At the end of the create, do something like $("#my-button").bind("click"); I believe you'd need to unbind it at some point though. Commented Jun 6, 2012 at 20:00
  • 3
    I'm having a similar problem with leaflet. It seems to be related to the map disabling click propagation. Could that be the case with your issue? Commented Sep 19, 2012 at 2:11

10 Answers 10

Reset to default
307

Use this. You can replace body with any parent element that exists on dom ready

$('body').on('click', '#my-button', function () {
     console.log("yeahhhh!!! but this doesn't work for me :(");
});

Look here http://api.jquery.com/on/ for more info on how to use on() as it replaces live() as of 1.7+.

Below lists which version you should be using

$(selector).live(events, data, handler); // jQuery 1.3+

$(document).delegate(selector, events, data, handler); // jQuery 1.4.3+

$(document).on(events, selector, data, handler); // jQuery 1.7+

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

20 Comments

Here's a fiddle I made to test out 'on' click. jsfiddle.net/X8KcU/1
"You can replace BODY with any parent element that EXISTS ON DOM ready" that's the key, thanks man!
Unfortunately this solution isn't ideal because it requires that I add an ID to the element I'm listening for events from. I'd rather the createMyButton function return an element that already has an event listener attached to it. Is that possible in JQuery?
@Ajedi32 not necessarily - You just need the right css selector to target your element. Can you explain more on what exactly you're trying to do?
Ok I thought so. The checkbox is added dynamically after an ajax call to the server, which responds with the info required to create it. I've done what you suggested and manipulated it after the input was added to the DOM.
|
44

I am really surprised that no one has posted this yet

$(document).on('click','#my-butt', function(){
   console.log('document is always there');
})

If you are unsure about what elements are going to be on that page at that time just attach it to document.

Note: this is sub-optimal from performance perspective - to get maximum speed one should try to attach to the nearest parent of element that is going to be inserted.

Improve this answer

7 Comments

On the performance perspective, how would you measure that?
@JohnnyBigoode only way to make it worse would be to attach it to window :) , it will have to bubble up all the way through the html (child->parent->...document). I would still do it though... there are far worse things...
@JohnnyBigoode and accepted answer (on average) will be 2 levels up which is pretty much negligible...
I'm just wondering, how one would go around measuring javascript performance... is there any recommended way?
@MatasVaitkevicius my butt ? lol
|
23

Try this.... Replace body with parent selector

$('body').on('click', '#my-button', function () {
    console.log("yeahhhh!!! but this doesn't work for me :(");
});
Improve this answer

1 Comment

I see you answered first with a simple typo, so my +1 is for you for the intention. Great solution. Thanks!
9

Try:

$('body').on({
    hover: function() {
        console.log("yeahhhh!!! but this doesn't work for me :(");
    },
    click: function() {
        console.log("yeahhhh!!! but this doesn't work for me :(");
    }
},'#my-button');

jsfiddle example.

When using .on() and binding to a dynamic element, you need to refer to an element that already exists on the page (like body in the example). If you can use a more specific element that would improve performance.

Event handlers are bound only to the currently selected elements; they must exist on the page at the time your code makes the call to .on(). To ensure the elements are present and can be selected, perform event binding inside a document ready handler for elements that are in the HTML markup on the page. If new HTML is being injected into the page, select the elements and attach event handlers after the new HTML is placed into the page. Or, use delegated events to attach an event handler, as described next.

Src: http://api.jquery.com/on/

Improve this answer

5 Comments

This is right, however it will only work with the hover event and not with the click event...
I'm not sure I understand what you mean. .on() definitely works with the click event.
I know... its so rare... when I use: $('body').on('click hover', '#my-button', function () {console.log('hello');}) it works, but only on hover, also if I remove the "click" from above it will work with hover, but if I leave "click" it doesn't do anything... :(
I don't believe you can do that with on(). Maybe with bind you had that option, but with on() you have to do something like $('body').on({ hover: function() { }, click: function() { } }
See my updated answer and example.
8

You have to append it. Create the element with:

var $div = $("<div>my div</div>");
$div.click(function(){alert("clicked")})
return $div;

Then if you append it will work.

Take a look at your example here and a simple version here.

Improve this answer

2 Comments

I did something like this, and it worked fine.
I said it worked fine, so no issue. This is my preferred solution, as it means the handlers are dynamic like the content. Basically treating the content as a partial view with its own controller, which I really like.
1

Complement of information for those people who use .on() to listen to events bound on inputs inside lately loaded table cells; I managed to bind event handlers to such table cells by using delegate(), but .on() wouldn't work.

I bound the table id to .delegate() and used a selector that describes the inputs.

e.g.

HTML

<table id="#mytable">
  <!-- These three lines below were loaded post-DOM creation time, using a live callback for example -->
  <tr><td><input name="qty_001" /></td></tr>
  <tr><td><input name="qty_002" /></td></tr>
  <tr><td><input name="qty_003" /></td></tr>
</table>

jQuery

$('#mytable').delegate('click', 'name^=["qty_"]', function() {
    console.log("you clicked cell #" . $(this).attr("name"));
});
Improve this answer

Comments

0

Does using .live work for you?

$("#my-button").live("click", function(){ alert("yay!"); });

http://api.jquery.com/live/

EDIT

As of jQuery 1.7, the .live() method is deprecated. Use .on() to attach event handlers. Users of older versions of jQuery should use .delegate() in preference to .live().

http://api.jquery.com/on/

Improve this answer

5 Comments

.live() is deprecated and replacced with .on()
This won't work if my-button is loaded dynamically.
@j08691 yes it will, that's the point of live, delegate, and on.
@jbabey- Read the documentation on on(). If his element is created dynamically, you have to bind to an existing page element. "Event handlers are bound only to the currently selected elements; they must exist on the page at the time your code makes the call to .on()."
@j08691 is right, if the element is created dynamically it won't work.
0

On event

$('#my-button').on('click', function () {
    console.log("yeahhhh!!! but this doesn't work for me :(");
});

Or add the event after append

Improve this answer

1 Comment

This won't work if my-button is loaded dynamically.
0

jQuery .on method is used to bind events even without the presence of element on page load. Here is the link It is used in this way:

 $("#dataTable tbody tr").on("click", function(event){
    alert($(this).text());
 });

Before jquery 1.7, .live() method was used, but it is deprecated now.

Improve this answer

Comments

-3

Maybe bind() would help: 

button.bind('click', function() {
  alert('User clicked');
});
Improve this answer

1 Comment

click is shorthand for bind('click' ...)

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.