javascript - 动态生成的输入/按钮的单击事件处理程序？

Question

我可以使用完全相同的代码来处理静态按钮和 Ajax 生成的按钮的点击吗？我问的原因是我无法让点击处理程序为 Ajax 按钮工作，但如果我编写等效的静态 HTML，点击确实可以工作。

此代码是静态版本，可以正常工作:

// in JS file:
$(function(){
   $('input.sButton').click(function(){
      var f = $.farbtastic('#picker');
      f.linkTo(this);
      return false;
   });
});

在“静态 HTML”中:

<div id = "inputArea">
<label style="white-space: nowrap; line-height: 14px; height: 14px; vertical-align: bottom;">
<input id="sButton1" class="sButton" type="button" style="background-color: rgb(113, 16, 232);">
fubar1
</label>
</div>

正常的“动态 HTML”如下所示:

<div id = "inputArea">
</div>

Ajax 代码将按钮加载到“inputArea”中。我从 Firebug 中导出了该代码的静态版本。我运行了 Ajax 例程，然后在 Firebug 中获取了 HTML View ，其中包括服务器输出，并将其准确地剪切并粘贴到我的静态测试代码中，如上面所复制的。换句话说，我知道静态和动态 HTML 是等效的。

但是 - 静态代码可以工作，而动态代码则不能。 Firebug 显示静态版本中输入的 JS 单击处理程序，并且会弹出 farbtastic 颜色选择器，但在动态代码中不会发生这种情况。有什么想法吗？

Answer 1

如果您使用的是 jquery 1.7+，请使用 on 而不是 click

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

$("body").on("click","input.sButton",function(){
 //do whatever you want
});

如果使用较低版本的jquery，请使用live

$('input.sButton').live("click",function(){
 //do whatever you want
});