Question

我试图使用这个jQuery示例代码（source）：

<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"/>

（显然这个表格已正确包含在表格标签等中）

我意识到，在这一点上，剧本不会根据所选数字中的数字附加新输入，我只是试图获得目前正在使用的基本表格 - 但它并没有＆＃39工作。我改变了数字，没有任何反应。我试过让数字输入一个文本输入并改变它，但没有骰子。我做错了什么？

编辑：标记的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，从而导致出现问题。但是，如果您将.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

错误已经是delegate_tel_1选择器有输入字段，如果你追加它覆盖旧字段试试这个

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

这个jQuery .append代码有什么问题？

6 个答案: