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

我可以使用完全相同的代码来处理点击静态和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点击处理程序，并且弹出了farbtastic颜色选择器，但这在动态代码中不会发生。有任何想法吗？

来源

2011-12-17 EML

查看jQuery的`.live（）`函数。 – 2011-12-17 00:34:12

您确定在分配点击操作之前将按钮添加到文档中？ – 2011-12-17 00:37:07

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

.live甚至可以侦听ajax内容。 Thsi应该这样做。另外，您也可以考虑jquery .on（）。确保你使用最新的jQuery。

来源

2011-12-17 00:36:25

有一个jQuery live功能只是为了这一目的，看看它here

来源

2011-12-17 00:35:10 haynar

如果您正在使用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 });

来源

2011-12-17 00:35:10 Shyju

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

回答

相关问题