-1

我正在尝试使用这个 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"/>

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

我意识到此时脚本不会根据所选数字中的数字附加新的输入，我只是想让一个基本的表格目前工作 - 但它不起作用。我换了号码，什么都没有。我试过让数字输入成为文本输入并改变它，但没有骰子。我究竟做错了什么？

编辑：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>
4

6 回答 6

2

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

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

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

于 2013-10-24T12:12:01.443 回答
1

可能这就是您要实现的目标。这是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/

于 2013-10-24T12:22:41.750 回答
0

$("#delegate_tel_1").append() 将尝试在 id=delegate_tel_1 的元素内追加，而不是在它之后。我认为它可能不起作用，因为您正试图将一个输入字段附加到另一个。

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

于 2013-10-24T12:13:05.407 回答
0

尝试这样的事情

   $("#delegate-tel-1").after("<input type='text' name='delegate-name-2' id='delegate_name_2' />");
于 2013-10-24T12:13:41.997 回答
0

你的输入 ID 是delegate-tel-1，但你有delegate_tel_1

它一定要是：

$("#delegate-tel-1").append("<input type='text' name='delegate-name-2' id='delegate_name_2' />");
于 2013-10-24T12:10:43.550 回答
0

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

$('#delegateno').keyup(function(){
       $("#DiffSelector").append("<input type='text' name='delegate-name-2' id='delegate_name_2' />");
});
于 2013-10-24T12:16:31.810 回答