JQuery select "on change" not working second time
I'm not sure if this is the error. I receive json
from the server for each selection on select box
. As per json
I am creating new form elements. On the first selection, everything works fine. But the second one doesn't fire the event handler.
$('#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);
});
});
here is a jsbin example.
+3
source to share
1 answer
You have:
var parent = $(this).parents('.form-group').next();
//...
$('.inserted-elm').remove();
$('.inserted-elm')
also selects the element in parent
, which means the code adds half the time to the deleted element. To fix this, replace 2 statements:
$('.inserted-elm').remove();
//...
var parent = $(this).parents('.form-group').next();
+6
source to share