jQuery的處理程序不能動態的添加ID工作

我有我的網頁，它會從我的JavaScript MVC框架動態添加ID以下元素：jQuery的處理程序不能動態的添加ID工作

<input data-bind="attr: { id: attributeName }" type="text" />

當元素被動態地呈現在頁面上時，生成的HTML看起來像這樣：

<input id="job_title" data-bind="attr: { id: attributeName }" type="text" />

然而，當我試圖點擊功能的輸入框，這是行不通的。（雖然相同的代碼在預先存在的輸入元素上工作）。

$("#job_title").click(function() { 
    alert('hi'); 
});

當輸入元素動態添加到具有動態「id」屬性的頁面時，上述代碼似乎不起作用。我將這個元素添加到了knockout.js foreach循環的頁面中，但我不知道這是否重要。有沒有其他人遇到過這個問題？。

這裏是真正的代碼...我怎麼能模擬$（「身體」）（）方法來替換此：

$("#job_title").typeahead({ 
    source: searchFunction,   
    onselect: function(obj) {    
    } 
});

來源

2012-06-14 Adam Levitt

因爲動態添加輸入元素不存在於頁面上，當你分配了點擊事件......所以在技術上，點擊事件從未受到約束。 – Wiz

這就是我的想法，但如果我做這個警報（「＃job_title」）長度）。它返回1而不是0. –

@AdamLevitt我相信，因爲它可以識別它，但點擊事件不會綁定到它。 –

你可能也想嘗試：

$("body").on("click", "#job_title", function() { alert('hi'); });

這應該工作，因爲click不是因爲您動態添加元素。

來源

2012-06-14 15:55:33

所以這工作......這讓我到我的解決方案的第一部分。現在，因爲我真的使用這個作爲一個原始示例來真正使用twitter-bootstrap typeahead插件。我怎麼能用這個來模擬這段代碼：$（「＃job_title」）。預先輸入（{} }）; –

爲什麼你不使用點擊數據綁定？例如：

<input data-bind="attr: { id: attributeName }, click: functionToCall" type="text" />

這將允許您從DOM操作中抽象出來，這是首先使用數據綁定的主要優點之一。你甚至可以讓這個函數來自視圖模型上的一個屬性，它可以動態地對上下文作出反應。

來源

2012-06-14 16:31:33 daedalus28

事情是我需要將twitter-bootstrap typeahead插件添加到元素上... –

在這種情況下，自定義綁定可能實際上是要走的路 - 類似Wiz的答案 – daedalus28

我建議編寫自定義淘汰賽粘結劑像這樣

ko.bindingHandlers.typehead = { 
    init: function(e){ 
     $(e).typeahead({ 
      source: searchFunction,   
      onselect: function(obj) {    
      } 
     }); 
    } 
};

然後應用粘結劑像任何其他淘汰賽粘合劑

<input id="job_title" data-bind="attr: { id: attributeName }, typehead:true" type="text" />

來源

2012-06-14 17:03:34 Wiz

jQuery的處理程序不能動態的添加ID工作

回答

相關問題