Jquery 函数对 AJAX 添加的 DOM 元素不起作用答案

【问题标题】：Jquery function doesn't work on DOM elements added by AJAXJquery 函数对 AJAX 添加的 DOM 元素不起作用
【发布时间】：2015-10-24 19:32:35
【问题描述】：

这是我的代码：

    $.ajax({
        url: "a.php",
        type: $(this).attr('method'),
        data: data,
        complete: function (xhr, result) {
            if (result == "success") {
                $("#field-option").remove();
                var chaine = '<section id="field-put"><ul>';
                var container;
                var passwords = xhr.responseText.split(";");
                for(var i= 0; i < passwords.length; i++) {
                    chaine += '<li><input type="text" class="put" id="field'+i+'" value="'+passwords[i]+'"><input type="button" value="Copy" name="copy" class="btn-put" data-clipboard-target="#field'+i+'"><span class="clear"></span></li>';

                }
                chaine += '</ul></section>';

                $("#main-area").append(chaine);

                $('#field0').shuffleText("My output text");

                new Clipboard('.btn-put');
            }
        }
    });

问题就出来了

$('#field0').shuffleText("My output text");

函数 shuffleText 不适用，因为#field0 是 Ajax 生成的，所以在初始 DOM 之后追加到 DOM。

如果#field0已经在初始DOM中，则应用shuffleText，但我需要在Ajax返回输入元素上应用该函数...

#field0 附加到 DOM 后如何查找？

感谢您的帮助

【问题讨论】：

事件何时在 field0 上触发？
试试这个 $(document).on('click,'#field0',function(){ $(this).shuffleText("我的输出文本") });
我不想在点击事件上调用函数...
这个功能什么时候在场上触发？加载？
您在插入元素后调用它，因此没有理由它不应该如图所示工作。听起来您在页面中重复“ID”，并且 ID 必须是唯一的

标签： jquery ajax dom

【解决方案1】：

shuffleText 不适用于文本输入字段。

Demo 你的例子不起作用。

您的示例中的Demo 将input 替换为div。

for(var i= 0; i < passwords.length; i++) {
     chaine += '<li><div class="put" id="field'+i+'">'+passwords[i]+'"</div><input type="button" value="Copy" name="copy" class="btn-put" data-clipboard-target="#field'+i+'"><span class="clear"></span></li>';
}

【讨论】：