jQuery追加 - 我做错了什么？

Question

我只是在用jQuery挣扎。我已经看了几十种添加新input字段的方法，但一开始就卡住了。我不知道这怎么可能更简单。

<div class="container">
<p>If you click on me, I will disappexxxxxxar.</p>
<p id="thisone">Click this onexxxx me away!</p>
<p id="thixxsone2">Click 2pppp22222hover me too!</p>
    <input type="checkbox" id="chk">
</div>

 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script> window.jQuery||document.write("<script src='../vendor/jquery/jquery-1.11.3.min.js'><\/script>")</script>
<script src="../vendor/bootstrap/js/bootstrap.js"></script>
<script src="../custom/js/custom.js"></script>

<script>
$("#chk").on("change",function(){
        $("#chk").append('<input type="text" />');
    }
)
</script>

我将添加if ($("#chk").is(":checked"))，似乎工作正常。

我经历了W3 jQuery，但它太短了。任何人都知道另一个在线＆＃34;课程＆＃34;？

Answer 1

第一：这条线应该做什么？

<script> window.jQuery||document.write("<script src='../vendor/jquery/jquery-1.11.3.min.js'><\/script>")</script>

第二：很好在文档准备好之后包装你的代码..你可以使用.append作为你的输入parent（）..这将在复选框输入后附加新输入

<script>
$(document).ready(function(){
  $("#chk").on("change",function(){
    if($(this).is(":checked")){
        $(this).parent().append('<input type="text" />');
    }     
  });
</script>

Answer 2

借助旧的StackOverflow问题（onClick add input field），我编写了一个使用jquery追加和工作的示例：

<强> HTML

<button id="add">Add input field</button><p id="main"></p>

<强> JS

$('#add').on('click', function () {
$('#main').append('<input type="aText" id="aText"><br>');
});

https://jsfiddle.net/uhhr60pj/ 希望有所帮助。

Answer 3

您的问题中的代码存在一个主要问题：

$("#chk").on("change",function(){
  $("#chk").append('<input type="text" />');
});

问题是<input>是一个空元素：

  

void元素是一个元素，其内容模型在任何情况下都不允许它拥有内容。 Void元素可以具有属性。

     

以下是HTML中的void元素的完整列表：

     

area，base，br，col，command，embed，hr，img，input，keygen，link，meta，param，source，track，wbr

_{引用：http://www.w3.org/TR/html-markup/syntax.html#syntax-elements，访问时间为01：00,2015-11-23。}

因为jQuery - 几乎总是 - 无声地失败，它永远不会提醒你事实上你正试图实现不可能的事实（字面意思是：不可能）;因此，您必须将元素附加到其他位置，例如之后<或em>（或之前）给定元素。

// bind the anonymous function of the
// on() method to handle the change
// event of the '#chk' element:
$('#chk').on('change', function() {

  // on the assumption you only want
  // to append elements when the element
  // is in fact checked:
  if (this.checked) {

    // creating the <input> element:
    $('<input />', {

      // setting its 'type' attribute/property:
      'type': 'text',

      // setting its 'placeholder' attribute:
      'placeholder': 'input number: ' + $('input[type=text]').length

      // inserting the <input> after the '#chk' element:
    }).insertAfter(this);
  }
});

input {
  display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <!-- I removed the irrelevant HTML -->
  <label>Click to add a new input element (when checked):
    <input type="checkbox" id="chk">
  </label>
</div>

正如您在复选框中看到的那样，这会在该复选框后直接附加新的<input>。由于我不希望你想做什么，我建议修改以上内容，以访问父 - <div> - 元素：

// bind the anonymous function of the
// on() method to handle the change
// event of the '#chk' element:
$('#chk').on('change', function() {

  // on the assumption you only want
  // to append elements when the element
  // is in fact checked:
  if (this.checked) {

    // creating the <input> element:
    $('<input />', {

      // setting its 'type' attribute/property:
      'type': 'text',

      // setting its 'placeholder' attribute:
      'placeholder' : 'input number: ' + $('input[type=text]').length

    // appending the <input> element to the parentNode of the
    // '#chk' element:
    }).appendTo(this.parentNode);
  }
});

input {
  display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <!-- I removed the irrelevant HTML -->
  <label>Click to add a new input element (when checked):
    <input type="checkbox" id="chk">
  </label>
</div>

参考文献：

• jQuery的：
  • appendTo()。
  • insertAfter()。
  • on()。