当我输入动态创建的输入字段时,如何更新动态创建的div的内容。
首先我有一个输入请求我想要的代码块数量:
$("#count-trigger").click(function(){
var count = $("#slide-count").val();
if (count !== "" && $.isNumeric(count)) {
var i = 1;
while (i <= count) {
$('.appendHere').append(
// Div I want to write to.
'<div 'id="slide-content_'+i+'">'Sample Title </div>'+
// Input field used to populate above div
' <input '+
' type = "text" '+
' name = "slide_name_'+i+'" '+
' data-target = "slide_name_'+i+'" '+
));
i++;
}
});
以上是非常明显的,输入值按go go我得到x个div /输入。
在我输入创建的输入时尝试填充创建的div时出现问题。
非常感谢任何帮助。
答案 0 :(得分:1)
您可以使用IIFE为每次迭代保留一个范围,并使用稍后使用的变量。在最新的ECMA中,您甚至可以使用块级范围。
$("#count-trigger").click(function() {
var count = $("#slide-count").val();
var i = 1;
while (i <= count) {
(function() {
var codeOutput, codeInput;
codeOutput = $('<div class="code">');
codeInput = $('<input type="text"/>');
codeInput.on('input', function() {
codeOutput.text($(this).val())
})
$('.appendHere').append(codeInput, codeOutput);
})();
i++;
}
});
.code {
border: 1px dashed #bc0000;
min-height: 20px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="slide-count" type="number" />
<button id="count-trigger">Create</button>
<div class="appendHere"></div>
答案 1 :(得分:0)
好的,所以@zak建议的改变就可以了。
我在每个输入中添加了onchange="liveUpdate(input_id)"
。
然后添加此功能
function liveUpdate(e_id) {
var typed = $('#'+e_id).val();
$('[data-target='+e_id+']').text(typed);
}
我想有一个更好的解决方案,但考虑到我对js的吸引力以及它完美无缺的事实 - 我很高兴。