jQuery替换并附加

Question

I have a simple piece of code that changes a select box into a text field if the user selects yes. I then want to be able to change it back to a drop down if if the user checks the box besides the text field.

The issue however is that when it replaces the element, it doesn't append the checkbox to it.

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

Here is a fiddle: https://jsfiddle.net/0ytut7ec/

What am I missing?

Answer 1

Try to use .after() at this context. Also the order of execution is also important.

If you add a new element after removing/replacing the target element, then that new element will not be added as the target lost its reference in 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> 

Answer 2

Offering an alternate answer: 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;
  }
});

Here we create the input and the checkbox, replace, and then append after.