Javascript /Jquery: replace click with on

Question

I need to add a click handler to a dynamic added link. I have read that the click method from JQuery does not work for dynamically created elements (and actually I could not get it to work).

I have the following code:

$(this).find(ops.editbuttonselector).click(function(e) {

As the .live method is now deprecated, I would need to use .on for this. According to this thread and my undersntanding of jquery (which is limited), I should do:

selector = $(this).find(ops.editbuttonselector) 
$(document).on('click', selector, function(e) {

But this also did not work and actually what was working before (existing elements) stopped working as well.

Can someone please point me to the right syntax.

thanks in advance

SLaks · Accepted Answer · 2012-10-23 18:23:49Z

3

The second parameter to .on() is a selector string, not a jQuery object:

$(document).on('click', ops.editbuttonselector, function(e) {

answered Oct 23, 2012 at 18:23

SLaks

891k182 gold badges1.9k silver badges2k bronze badges

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

Comments

Community · Accepted Answer · 2017-05-23 12:21:18Z

1

Since you bind it using $(this), I assume that you are trying to add the handler after the element had been added to DOM.. if that is the case then you can simply do like below,

//below is direct binding which is better than delegated event
$(this).find(ops.editbuttonselector).on('click', function(e) {

Else if this is the parent element which exist in DOM when below line is executed,

//this is delegated event binding method
$(this).on('click', ops.editbuttonselector, function(e) {

else you can .on to the closest parent which might exist in DOM or document object.

You can read more about when and why you should bind to document object https://stackoverflow.com/a/12824698/297641

edited May 23, 2017 at 12:21

CommunityBot

11 silver badge

answered Oct 23, 2012 at 18:28

Selvakumar Arumugam

79.9k15 gold badges123 silver badges139 bronze badges

1 Comment

duduklein Over a year ago

Thanks for the more complete answer. Your solution also worked and with other benefits.

Collectives™ on Stack Overflow

Javascript /Jquery: replace click with on

2 Answers 2

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related