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/

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

1 个答案: