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+，请使用而不是点击

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

Answer 2

$('input.sButton').live('click', function(){
      var f = $.farbtastic('#picker');
      f.linkTo(this);
      return false;
   });

.live甚至会监听ajax内容。这应该可以解决问题。此外，您可能还想查看jquery .on（）。确保您使用的是最新的jquery。

Answer 3

只为此目的有一个jQuery live函数，请查看它here

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

3 个答案: