jQuery .append代码有什么问题？

Question

我正在尝试使用以下jQuery示例代码（ 源 ）：

<script type="text/javascript">
        //change event on delegateno field to prompt new input
        $('#delegateno').change(function() {
        //dynamically create new input and insert after delegate_tel_1
           $("#delegate-tel-1").append("<input type='text' name='delegate-name-2' id='delegate_name_2' />");
});</script>

根据用户更改数字选择器，将额外的表单字段附加到预订表单中：

<input type="number" id="delegateno" value="1">
<input type="text" class="text" name="delegate_name_1" id="delegate-name-1" placeholder="Delegate Name" />
<input type="text" class="text" name="delegate_email_1" id="delegate-email-1" placeholder="Delegate Email" />
<input type="text" class="text" name="delegate_tel_1" id="delegate-tel-1" placeholder="Delegate Telephone"/>

（显然，此表单已正确封装在表单标签中，等等）

我意识到，此时脚本不会根据所选数字中的数字添加新的输入，我只是想使当前的基本表格正常工作-但它不起作用。 我更改号码，没有任何反应。 我试图使数字输入成为文本输入并进行更改，但没有骰子。 我究竟做错了什么？

编辑：ID标记中指出的错误，现在更改了脚本中的ID以匹配输入字段的ID。 我也已更改为.after而不是.append-仍然没有骰子。 我现在有：

<script type="text/javascript">
  //change event on delegateno field to prompt new input
  $('#delegateno').change(function() {
  //dynamically create new input and insert after delegate_tel_1
  $("#delegate-tel-1").after("<input type='text' name='delegate-name-2' id='delegate_name_2' />");
        });
</script>

Answer 1

您的jQuery正在寻找ID delegate_tel_1 ，而您的HTML则具有ID delegate-tel-1 。

您可以使用$("[name=delegate_tel_1]")来匹配name属性，也可以使用$("#delegate-tel-1")来正确匹配ID。

---

但是，append会将新input插入第一个input ，从而导致问题。 但是，如果将.append更改为.after ，则jQuery将在第一个之后插入新的<input> 。

Answer 2

可能这就是您要实现的目标。 这是HTML代码

<form>
    <input id="delegateno" type="text" value="0" />
    <div class="input-container"></div>
</form>

和JS代码

$('#delegateno').change(function () {

    var count = parseInt($(this).val());
    var container = $('.input-container');
    container.empty();
    for (var i = 0; i < count; i++) {
        var inputEl = $('<input type="text" class="text" name="delegate_name_' + i + '" id="delegate-name-' + i + '" placeholder="Delegate Name" />')
        inputEl.appendTo(container);
    }
})

这是jsfiddle http://jsfiddle.net/YMVeb/2/

Answer 3

您的输入ID为delegate-tel-1 ，但您拥有的是delegate_tel_1

它一定要是：

$("#delegate-tel-1").append("<input type='text' name='delegate-name-2' id='delegate_name_2' />");

Answer 4

$（“＃delegate_tel_1”）。append（）将尝试在id = delegate_tel_1的元素内追加，而不是在其后。 我认为这可能不起作用，因为您尝试将一个输入字段附加到另一个输入字段。

尽管其他人也正确指出了您的身份证件的问题

Answer 5

尝试这样的事情

   $("#delegate-tel-1").after("<input type='text' name='delegate-name-2' id='delegate_name_2' />");

Answer 6

该错误已经是委托_电话_1选择器已经输入的字段，如果您追加它覆盖旧的尝试一下

$('#delegateno').keyup(function(){
       $("#DiffSelector").append("<input type='text' name='delegate-name-2' id='delegate_name_2' />");
});