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

Question

我试图找到克隆元素中存在的textarea的值，然后更改该值，但是当我将其写到控制台时，我一直在获取“未定义”的值。

我的模板：

<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/