javascript - jQuery 替换和追加

Question

如果用户选择"is"，我有一段简单的代码可以将选择框更改为文本字段。然后，如果用户选中文本字段旁边的框，我希望能够将其改回下拉菜单。

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

$(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;
    }
});

这是一个 fiddle :https://jsfiddle.net/0ytut7ec/

我错过了什么？

Answer 1

尝试使用.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;
  }
});

DEMO

$(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>