Question

我正在尝试创建一个可以通过克隆元素追加的列表。每个元素都有一个输入字段。不知何故，firefox在克隆时无法检测输入字段并第二次保存字段。以下是我正在使用的代码：

$('#add_xx').on('click', function(event) {        
    var clone = $('#hidden_base .new_xx').clone().attr('id', 'id' + Math.floor(Math.random() * 100));
    $('#save_xx').addClass('disabled');
    clone.find('input[name="name"]').attr('name', 'name' + Math.floor(Math.random() * 100)).val("").attr("id", "uid" + Math.floor(Math.random() * 100));
    $('ul.xx_list').append(clone);
    $('#xx_list').trigger('add_xx');
    return false;
});

非常感谢任何帮助。

Answer 1

我不确定导致问题的原因，但是从您的代码示例中我看到您尝试进行HTML模板化。对于非常简单的情况，这仅适用于jQuery，但它很快变得困难和丑陋。

切换到合适的HTML模板引擎（我建议handlebars.js）是值得的，它会解决这个问题（以及其他一些问题，比如将JS代码从布局中分离并处理转义问题）

＆＃13;

var formSection = Handlebars.compile( $("#form-section-template").text() );
var counter = 0;

$(document)
.on("click", ".form-section-add", function () {
    var newSection = formSection({
        value: "Value #" + ++counter
    });
    $("#form-sections").append(newSection).find(":text").last().focus();
})
.on("click", ".form-section-remove", function () {
    $(this).closest(".form-section").remove();
});

＆＃13;

#form-sections {
    list-style-type: none;
    padding: 0;
}
#form-sections > li {
    margin-bottom: 4px;
}

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.5/handlebars.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<script id="form-section-template" type="text/x-handlebars-template">
  <li class="form-section">
      <input type="text" name="entry[]" placeholder="Please enter a value..." value="{{value}}">
    <button class="form-section-remove">Remove line</button>
  </div>
</script>

<ul id="form-sections"></ul>
<button class="form-section-add">Add line</button>

＆＃13;

Firefox问题与jQuery Clone

1 个答案: