Question

我正在尝试在我的网站上创建portlet，这些portlet是在用户输入数字并单击按钮时生成的。

我在脚本标签中包含了HTML（因此它是不可见的）。我能够克隆脚本标记的HTML内容并将其附加到必要的元素而不会出现问题。我的问题是，我似乎无法在添加模板之前修改模板中的文本。

这是我想做的事情的超级简化版。我只是想让它的一部分正常工作，然后再构建更多。

这是带有模板的脚本标签：

var p = $("#tpl_dashboard_portlet").html();
var h = document.createElement('div');
$(h).html(p);
$(h).find('div.m-portlet').data('s', s);
$(h).find('[data-key="number"]').val(s);
$(h).find('[data-key="name"]').val("TEST");
console.log(h);
console.log($(h).html());
console.log(s);
$("div.m-content").append($(h).html());

<script id="tpl_dashboard_portlet" type="text/html">
    <!--begin::Portlet-->
    <div class="m-portlet">
        <div class="m-portlet__head">
            <div class="m-portlet__head-caption">
                <div class="m-portlet__head-title">
                    <h3 class="m-portlet__head-text">
                        <span data-key="number"></span> [<span data-key="name"></span>]
                    </h3>
                </div>
            </div>
            <div class="m-portlet__head-tools">
            	<ul class="m-portlet_nav">
            		<li class="m-portlet__nav-item">
            			<a href="javascript:void(0)" class="m-portlet__nav-link m-portlet__nav-link--icon"><i class="la la-close"></i></a>
            		</li>
            	</ul>
            </div>
        </div>
        <!--begin::Form-->
        <div class="m-portlet__body">
        	Found! <span data-key="number"></span> [<span data-key="name"></span>]
		</div>
	</div>
    <!--end::Portlet-->
</script>

我不确定我在做什么错。我也尝试过使用.each，但没有运气。两者都将span标签的值留空。

（我已经删除了一些脚本，但是变量s确实有一个值）

Answer 1

您在这里有两个问题。首先，每次调用connection error时，都是从原始模板HTML创建一个新的jQuery对象。这样，您所做的所有先前更改都会丢失。您需要从HTML 一次模板创建jQuery对象，然后对该对象进行所有更改。

第二，您通过$(h)属性选择的span元素没有data-key属性可以更改，您需要设置其value。试试这个：

text()

var s = 'foo';
var p = $("#tpl_dashboard_portlet").html();
var $h = $('<div />');
$h.html(p);
$h.find('div.m-portlet').data('s', s);
$h.find('[data-key="number"]').text(s);
$h.find('[data-key="name"]').text("TEST");

$("div.m-content").append($h.html());

Answer 2

在我的情况下只有这有效：

var template = $('template').clone(true, true); // Copies all data and events
var $h = $('<div />');
$h.html(template);
$h.find('.input-name').attr('value', "your value here"); // Note: .val("your value here") is not working

$('.list').prepend($h.html());

从元素复制HTML，用jQuery替换文本，然后附加到元素

2 个答案: