Question

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

但问题是当它替换元素时，它不会附加复选框。

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

我错过了什么？

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

提供替代答案：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;
  }
});

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

jQuery替换为和追加

2 个答案:

DEMO