Question

我有以下功能正常工作：

        $(function() {
                var availableTags  = <? echo htmlspecialchars($jsEnc,ENT_NOQUOTES,'utf-8');?>;

                $( "input.tags" ).autocomplete({
                    source: availableTags
                });
        });

在所有预先存在的：<input class="tags"/>上，该函数正常运行（作为数据库转储的自动完成列表）。

现在，这些输入实际上存在于<table>中，其中的行可以动态添加或删除。

将细胞添加到表格时，我会执行以下操作：

if(i== document.getElementById("soldTo").cellIndex){ element2.setAttribute('class','tags'); }

这基本上使得输入（element2）能够成为jquery函数的目标（至少我认为）。

我假设jquery函数没有“意识到”这个新元素，必须以某种方式重新初始化以查看新成员。

这是真的吗？这是在添加新元素时完成的吗？某种$(x).add(myBehavior)？

修改

我尝试了以下内容：

$("table.inventoryItems").bind("DOMSubtreeModified", function() {
alert('z');
     $( "input.tags" ).autocomplete({
       source: availableTags
      });
 });

并且警报也不会触发。

有什么看似可疑吗？

谢谢

正确的解决方案外部链接

jquery autocomplete on element retrieved w/ ajax

Answer 1

尝试DOMSubtreeModified事件：

$("table").bind("DOMSubtreeModified", function() {
     $( "input.tags" ).autocomplete({
        source: availableTags
     });
});

或者您可以根据创建新输入元素的方式使用 on() 方法：

$("table").on("change", "input.tags", function() {
     $(this).autocomplete({
        source: availableTags
     });
});

dom jquery行为不起作用

1 个答案: