jQuery select元素"on change"第二次不起作用

Question

我不确定这里的bug是什么.我json在每个选择上从服务器获得select box.根据json我正在创建新的表单元素.在第一次选择时,一切正常.但第二个不会触发我的事件处理程序.

$('#planned_process').on('change', function(e){
  var $this = $(this);
  var parent = $(this).parents('.form-group').next();

  // if (e.added){
  $('.inserted-elm').remove();
  console.log('selected process :', $this.val());

  record = {
    ...,
    "tags":[
      "dummy-tag"
    ],
    "priority":1,
    "is_valid":true,
    "planned_start_time":"2014-01-01T21:01:00",
    "selected_recipies":[

    ],
    "planned_duration":"23",
    "created_date":"2014-08-19T06:45:15.669",
    "planned_input":[

    ],
    "last_editor":[
      "",
      ""
    ],
    "planned_output":[

    ],
    "created_by":[
      "",
      ""
    ],
    "planned_resources":[

    ]
  };
    _.each(record, function(val, key){
      var nameType = 'planned-process-disabled';
      var type = 'text';
      var elm = '<!-- start of element -->' +
          '<div class="form-group inserted-elm has-error"' +
          ' data-id="' + 'QQQ' + '">'+
          '<label for="process_' + key + '" class="col-sm-4 control-label">'+
          key + ' [' + nameType + '] '  + ' :</label>' +
          '<div class="col-sm-8">' +
          '<input name="parameter_values' + '" type="'+ type +'" id="' +
          key + '" ' + 'value="'+ val + '" ' +
          'class="form-control" disabled="disabled"/></div> </div>' +
          '<!-- end of element -->';
      parent.before(elm);
    });
});

这是一个jsbin的例子.

JSBIN

Answer 1

你有:

var parent = $(this).parents('.form-group').next();
//...
$('.inserted-elm').remove();

在$('.inserted-elm')也是在选择元件parent,这意味着码被附加到一个删除的元素一半的时间.要修复它,请交换2个语句:

$('.inserted-elm').remove();
//...
var parent = $(this).parents('.form-group').next();