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工作

回答

相关问题