Question

我有以下HTML代码

     <div class="span4 child_age_box">
           <input class="child_age_input" value="2">
     </div>

在我想要克隆的jquery之后，在触发事件时附加块。

var child_value_input= $('.child_age_input');

var add_box = function (){$('.child_ages').on("change",function(){
    $(this).parent().parent().parent().find('.child_age_box').empty();
   for(var i= 0; i< parseInt($(this).val()); i++){
            $(this).parent().parent().parent().find('.child_age_box').append(child_value_input.clone().show().get(0).outerHTML)
}});

当我触发事件时似乎没问题。框出现，我可以在其中加入一些值。但是当我要求$('.child_age_input')时。我看不到我放在文本框中的值。有什么我想念的吗？

Answer 1

不要相信outerHTML，而是使用.val()获取实际值。如果源代码中的value属性为2，则即使您更改了outerHTML，它仍会显示2（至少在Chrome中）：

var fld = $('.child_age_input');
fld.val('3');
$(document.body).append(fld.clone());

$('.child_age_input').each(function(){
   console.log(this.outerHTML, $(this).val()); 
   // 2x <input class="child_age_input" value="2"> 3 
});

http://jsfiddle.net/HQsrQ/

Answer 2

我认为这是导致错误的原因 $(this).parent().parent().parent().find('.child_age_box').empty() 您正在调用empty()，以便从DOM中删除child_age_input元素

在另一个注释而不是parent().parent()上，您可以使用closest()

无法看到jquery克隆输入的更改值

2 个答案: