Question

我的页面上有以下元素，它从我的javascript MVC框架中获取动态添加的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循环中将此元素添加到页面中，但我不知道这是否重要。还有其他人遇到过这个吗？

这是真正的代码......如何模拟$（“body”）。on（）方法来替换它：

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

Answer 1

您可能想尝试：

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

这应该有效，因为click没有，因为你正在动态添加元素。

Answer 2

我建议像这样写一个自定义的淘汰赛活页夹

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

然后像任何其他Knockout活页夹一样应用活页夹

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

Answer 3

为什么不使用点击数据绑定？类似的东西：

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

这将允许您从DOM操作中抽象出来，这是首先使用数据绑定的主要优点之一。您甚至可以从视图模型上的属性中获取该函数，该属性可以动态地响应上下文。

jquery处理程序不使用动态添加的id

3 个答案: