What is the different between 'click' and 'on' in jquery

Question

I have a button in a datatable. I have a class attached to it . All the rows of the data table has this button field with different field id and same class.I just want to print the id of the button on its click.

 '<button class="link" id="field1">'+field1+'</button>';

 '<button class="link" id="field2">'+field2+'</button>';

When i make the call using $(".link").click(function(){ console.log(this.id)}; it does nothing.

But when i make the call using $(document).on('click','.link',function(){ console.log(this.id)} it worked . So i want to know the difference why the second one works and the first one doesn't work . Here this Difference between .on('click') vs .click() question says that both are functionally same, So what might be the reason in this case .

Are you buttons made dynamic? if so then you have your answer on why the `$(".link").click` don't work — Carsten Løvbo Andersen, Mar 30 '17 at 05:32
the difference: "on" event binds dinamically, and "click" binds on page load only. So if you need to bind event to newly created elements, such datatable items, you need use "on" or "live" bindings — diavolic, Mar 30 '17 at 05:33

score 1 · Accepted Answer · edited Mar 30 '17 at 08:34

1

Read the jquery on api you will find your answer.

and I am sure your button element are not present at the time of html render,

edited Mar 30 '17 at 08:34

RonyLoud

2,408
2
20
25

answered Mar 30 '17 at 05:36

Mukul Bhardwaj

183
1
2
8

What is the different between 'click' and 'on' in jquery

1 Answers1