单击事件处理程序以获取动态生成的输入/按钮？

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视图,其中包括服务器输出,并将其精确地剪切并粘贴到我的静态测试代码中,该代码在上面重现.换句话说,我知道静态和动态HTML是等价的.

但是 - 静态代码有效,而动态代码则无效.Firebug显示为静态版本输入的JS点击处理程序,并且弹出了远程颜色选择器,但这在动态代码中不会发生.有任何想法吗？

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
});