jQuery替换为并追加

jQuery replace with and append

本文关键字：追加 替换 jQuery      更新时间：2023-09-26

我有一段简单的代码，如果用户选择yes，它会将选择框更改为文本字段。如果用户选中文本字段旁边的框，我希望能够将其更改回下拉列表。

然而，问题是，当它替换元素时，它不会将复选框附加到它上面

$(document).on("change", "[name=projectRelated]", function(e) {
    // Define our values
    var prj = this.value;
    // Depending on our choice
    switch(prj){
        case 'Yes':
            $(this)
            .replaceWith($('<input/>',{'type':'text','value':'', 'name':'projectRelatedDesc', 'placeholder':'Enter project details'}))
            .append('<div class="checkbox"><label><input type="checkbox" class="notPrjRelated"> No</label>');
        break;
    }
});

这是一把小提琴：https://jsfiddle.net/0ytut7ec/

我错过了什么？

尝试在此上下文中使用.after()。执行顺序也很重要。

如果在移除/替换目标元素后添加新元素，则不会添加该新元素，因为目标在DOM中失去了引用。

$(document).on("change", "[name=projectRelated]", function(e) {
  // Define our values
  var prj = this.value;
  // Depending on our choice
  switch (prj) {
    case 'Yes':
     $(this)
     .after('<div class="checkbox"><label><input type="checkbox" class="notPrjRelated"> No</label>')
        .replaceWith($('<input/>', {
          'type': 'text',
          'value': '',
          'name': 'projectRelatedDesc',
          'placeholder': 'Enter project details'
        }))
      break;
  }
});

演示

$(document).on("change", "[name=projectRelated]", function(e) {
  // Define our values
  var prj = this.value;
  // Depending on our choice
  switch (prj) {
    case 'Yes':
      $(this).after('<div class="checkbox"><label><input type="checkbox" class="notPrjRelated"> No</label>').end()
        .replaceWith($('<input/>', {
          'type': 'text',
          'value': '',
          'name': 'projectRelatedDesc',
          'placeholder': 'Enter project details'
        }))
      break;
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="span2" name="projectRelated">
  <option value="">Select Option</option>
  <option value="Yes">Yes</option>
  <option value="No">No</option>
</select>

提供替代答案：https://jsfiddle.net/Twisty/6mx4r3s8/

$(document).on("change", "[name=projectRelated]", function(e) {
  // Define our values
  var prj = this.value;
  // Depending on our choice
  switch (prj) {
    case 'Yes':
      var $inp = $('<input/>', {
        'type': 'text',
        'value': '',
        'name': 'projectRelatedDesc',
        'placeholder': 'Enter project details'
      });
      var $chk = $('<div class="checkbox"><label><input type="checkbox" class="notPrjRelated">No</label></div>');
      $(this).replaceWith($inp);
      $inp.after($chk);
      break;
  }
});

在这里，我们创建输入和复选框，替换，然后追加。

相关文章：