爲動態生成的輸入/按鈕單擊事件處理程序？

我可以使用完全相同的代碼來處理點擊靜態和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

爲動態生成的輸入/按鈕單擊事件處理程序？

回答

相關問題