2011-11-21 51 views
3

我已動態生成使用Ajax和PHP 這裏的數據庫的葡萄酒類型的列表是功能jQuery的附加複選框,如果選中,它不會返回任何東西?

function wineTypeHandler(data){ 
      var Type = data.Type; 
      var countType = data.countType; 
      for(var i = 0; i < countType; i++){ 

       $("#selectType").append(

       $("<input />").attr({ 
        type: 'checkbox', 
        name: 'Type', 
        class: 'wineTypeCheck', 
        value: Type[i] 
        }), Type[i] + "<br />" 
      ); 
      } 
     } 

正如你可以看到我有「附加」的結果在一定的div id爲selectType,這整個事情工作正常,我唯一的問題是當我想要更新另一個列表基於從列表中檢查的內容,它不響應任何事情!當我嘗試這一個和許多其他方式

$(document).ready(function(){ 

$(':checkbox').click(function(){ 
alert('started'); 

    // other code 
     return true; 

}); 

});

它不提醒任何東西!任何人都可以幫助我解決這個問題。

謝謝你提前。

回答

5

.click()將自己附加到創建DOM時存在的元素。您的元素正在動態生成,因此.click()實際上並未應用於它們。

您應該使用.live()來定位動態生成的元素,因爲它將自己附加到DOM初始加載後創建的任何元素。我也建議使用change事件,而不是一個click

$(':checkbox').live('change', function(){ 
    // No need to return true; 
}); 
+0

這樣做,非常感謝你 – Shpat

+0

不客氣。 – Blender

0

的事件只能綁定到現有元素。您需要使用live

$(':checkbox').live("click", function(){ 
    alert('started'); 
}); 

編輯:

在jQuery 1.7的.live()方法已經過時了。使用.on()附加事件處理程序。老版本的jQuery用戶應該使用.delegate()優先於.live()

jQuery的1.4.3+使用delegate

$(#selectType).delegate(':checkbox', "click", function(){ 
    alert('started'); 
}); 

jQuery的1.7+使用on

$(#selectType).on("click", ':checkbox', function(){ 
    alert('started'); 
}); 
0

剛剛嘗試這一點

$(':checkbox').live('change', function(){ 

}); 
0

您需要的元素後,點擊綁定事件已被添加到DOM。這是JavaScript開發中的一個流行問題。我建議創建一個設置綁定事件的函數,並在你的append調用(以及jQuery(document).ready())之後調用它。

編輯:我看到很多關於jQuery.live()的建議請注意,jQuery的live()方法已被棄用,不應使用。

1

這是因爲在頁面加載完成後,但在複選框動態創建之前,您正在分配點擊功能。
根據您使用的jQuery版本,您可以使用on()(用於jQuery版本1.7或更高版本),delegate()(用於舊版本的jquery)或live()(簡單但低效)函數來註冊要動態創建的事件元素。

+0

通過JavaScript,我認爲你的意思是jQuery;) – Blender

+0

@Blender - 絕對的,一定有大腦故障。 –

+0

一直髮生在我身上。 – Blender

相關問題