Jquery 函数不适用于 AJAX 添加的 DOM 元素

Question

这是我的代码:

    $.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 后如何找到？

感谢帮助

Answer 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>';
}