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

时间:2015-10-24 19:32:35

标签: jquery ajax dom

这是我的代码:

    $.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后才能找到它?

感谢您的帮助

1 个答案:

答案 0 :(得分: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>';
}