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

What is wrong with this jQuery .append code?

本文关键字：什么 问题 代码 jQuery append 这个      更新时间：2023-09-26

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

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

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

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

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

尝试这样的事情

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

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

它必须是：

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

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

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

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

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

相关文章：