jquery - 在jquery中制作按钮触发功能

Question

我有以下 jQuery 代码：

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

HTML如下：

<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>

我希望“重置”按钮启动功能 ColReOrder.fnReset 但由于某种原因这不起作用。

Answer 1

您必须小心不要引用 DOM 中尚未加载的任何内容。如果<button>在您的代码被触发之前没有将其加载到 DOM 中，则不会发生任何事情。您可以通过在加载所有内容时运行代码来解决此问题：

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

此外，如果<button>通过 AJAX 或其他方式添加，您将遇到同样的问题。您可以使用on()方法解决此问题：

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

Answer 2

尝试使用事件委托。当您的 javascript 被执行时，该元素可能尚未加载到 dom 中。将单击事件附加到文档将通过侦听单击然后在单击时搜索您的选择器来使代码工作。

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

Answer 3

您必须在加载文档后执行代码。

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