javascript - 如何在 jQuery 克隆元素中找到 textarea 的值？

Question

我试图找到存在于克隆元素中的文本区域的值，然后更改该值，但是当我将它们写到控制台时，我不断得到“未定义”值。

我的模板:

<script type="text/template" data-template="test">
    <div id="content">
        <textarea id="txta">123</textarea>
    </div>
</script>

我的js代码:

$("#btnChange").on('click', function() {
    var templateName = 'test';
    var html;
    var el;
    el = $("script[data-template=" + templateName + "]");
    html = el.html();
    console.log('html: ' + html);                     //**this works**

    var clone = $(el).clone();
    console.log("clone: " + clone.html());            //**this works**

    var textarea = $(clone).find("textarea");
    console.log("txt val: " + textarea.val());        //**undefined**

    textarea.val("abc");
    console.log("txt val: " + textarea.val());
});

Answer 1

clone 是包含文本的脚本标签。因此，它不包含供您操作的文本区域。您必须将文本转换为 dom 片段。

var textarea = $(clone.html()).find("textarea");

演示:http://jsfiddle.net/Tentonaxe/wtUBQ/

请注意，这实际上并没有以任何方式改变 clone。

我建议这样做:

$("#btnChange").on('click', function () {
    var templateName = 'test';
    var html;
    var el;
    el = $("script[data-template=" + templateName + "]");
    html = el.html();
    console.log('html: ' + html); //**this works**

    var template = $.parseHTML($(el).text());
    console.log("template: " + template); //**this works**
    var textarea = $(template).find("textarea");
    console.log("txt val: " + textarea.val()); //**undefined**

    textarea.val("abc");
    console.log("txt val: " + textarea.val());
    $("body").append(template);
});

http://jsfiddle.net/Tentonaxe/wtUBQ/1/