Make button trigger function in jquery

Question

I have the following jQuery code :

$("#btnReset").click(function () {
    ColReorder.fnReset(oTable);
    return false;
});

And the HTML as follows :

<div style="padding: 5px 5px 1px 0px; float: right" id="globalbutton-row" class="ex">
    <button class="button" type="button" id="btnReset"><%=rb.getString("button.reset")%></button>
    <button class="button" type="button" id="btnDeveloperSampleMenu" onclick="javascript:CallDeveloperSampleMenu()"><%=rb.getString("button.devsamplemenu")%></button>
</div>

I want the button 'Reset' to launch the function ColReOrder.fnReset but for some reason this does not work.

What do you mean by "does not work"? Do you see any errors in your console? — gen_Eric
– gen_Eric, Commented Dec 12, 2012 at 18:53
Your code seems right. Could there possibly be a problem with the ColReOrder.fnReset function? — Jason
– Jason, Commented Dec 12, 2012 at 18:54
Always put description about your errors. So other users can identify what problem do you have.. — Parth Soni
– Parth Soni, Commented Dec 12, 2012 at 19:11

Matanya · Accepted Answer · 2012-12-12 19:29:35Z

2

You have to be careful to not reference anything in the DOM that isn't loaded yet. If the <button> is not loaded into the DOM before your code is fired, nothing will happen. You can fix this by running your code when everything is loaded:

$(document).ready(function() {
  $("#btnReset").click( function () {
    ColReorder.fnReset( oTable );
    return false;
  } );
});

Also if the <button> is added via AJAX or some other way, you will have the same problem. You can fix this by using the on() method:

$(document).ready(function() {
  $(document).on('click',"#btnReset", function(event) {
    ColReorder.fnReset( oTable );
    return false;
  } );
});

edited Dec 12, 2012 at 19:29

Matanya

6,3469 gold badges50 silver badges82 bronze badges

answered Dec 12, 2012 at 18:54

D.A

2,6211 gold badge15 silver badges10 bronze badges

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

3 Comments

bluetoft Over a year ago

the live() function has been deprecated in latest jQuery. use .on() instead

gen_Eric Over a year ago

That's not how on works. You don't just replace .live() with .on(). They are different. It should be $('#parent').on('click', '#btnReset', function(){, where '#parent' is the closest parent that is always in the DOM (could be document).

D.A Over a year ago

My apologies, I thought the selector was simply used to specify which descendants the event was applied to, and was omitted to have it apply to the current object. I was halfway there.

bluetoft · Accepted Answer · 2012-12-12 18:53:38Z

1

try using event delegation. Chances are the element hasn't loaded into the dom when your javascript is getting executed. attaching the click event to the document will make the code work by listening to click and then searching for your selector at the time of the click.

$(document).on('click','#btnReset',function () {
  ColReorder.fnReset( oTable );
  return false;
  } );

answered Dec 12, 2012 at 18:53

bluetoft

5,4432 gold badges25 silver badges27 bronze badges

Comments

dualed · Accepted Answer · 2012-12-12 18:54:13Z

0

You have to execute your code after the document was loaded.

$(function() {
  $("#btnReset").click( function () {
    ColReorder.fnReset( oTable );
    return false;
  });
});

answered Dec 12, 2012 at 18:54

dualed

10.5k1 gold badge28 silver badges30 bronze badges

Collectives™ on Stack Overflow

Make button trigger function in jquery

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related