Ognj3n Ognj3n - 7 months ago 15
Javascript Question

How to stop additional appending of elements in jQuery

I have a segment of page looking like this:
enter image description here

So, regular dropdown. When this is selected:
enter image description here

These two

buttons
disappear and
input
element shows. Like so:
enter image description here

And when I chose someting different than
Create new campaign
these two buttons show again and
input
disappears. But if try it a few times, it continues to add this input field, even though I don't want them. So here is the jsfiddle that shows my problem.

And I will post an attempt with whom I tried to stop those additional appending of elements:

var propagation = false;

$(document).ready(function() {

$('#campaign').change(function() {
var campaign = $('#campaign option:selected').val();
console.log(campaign);
// if(propagation==true){
// propagation=false;
// }
if (propagation == false) {
if (campaign == 'createCampaign') {
console.log('radi');
$('#editCampaign').hide();
$('#deleteCampaign').hide();
$('#appGroup').hide();
$('#h4').text('Campaign name:');
$('#edit-delete-camp').append('<input type="text" class="form-control" id="nameCampaign">');
$('#edit-delete-camp').append('<button class="btn btn-default" id="butonSukcesJsonValu" type="button">Save</button>');

}
propagation = true;
} else {
if (campaign != 'createCampaign') {
$('#editCampaign').show();
$('#deleteCampaign').show();
$('#appGroup').show();
$('#h4').text('Choose app group:');
$('#nameCampaign').hide();
$('#butonSukcesJsonValu').hide();
}
propagation = false;
}
});
});

Answer

You set the propagations outside the if, and therefor it won't work the second time. I updated your fiddle, check it out: https://jsfiddle.net/492b0vcx/5/

I also edited your HTML, and added a line of css, hope it will help.

var propagation = false;
$(document).ready(function() {

  $('#campaign').change(function() {
    var campaign = $('#campaign option:selected').val();
    console.log(campaign);
    //			if(propagation==true){
    //				propagation=false;
    //			}
    if (propagation == false) {
      if (campaign == 'createCampaign') {
        console.log('radi');
        $('#editCampaign').hide();
        $('#deleteCampaign').hide();
        $('#appGroup').hide();
        $('#h4').text('Campaign name:');
        $('.newCampain').show();
        //$('#edit-delete-camp').append('<input type="text" class="form-control" id="nameCampaign">');
        //$('#edit-delete-camp').append('<button class="btn btn-default" id="butonSukcesJsonValu" type="button"  >Save</button>');
				propagation = true;
      }
      
    } else {
      if (campaign != 'createCampaign') {
        $('#editCampaign').show();
        $('#deleteCampaign').show();
        $('#appGroup').show();
        $('#h4').text('Choose app group:');
        $('#nameCampaign').hide();
        $('#butonSukcesJsonValu').hide();
        propagation = false;
      }
      
    }
  });
});
.newCampain {
  display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<div class="selekcija">
  <select id="campaign" class="form-control">
    <option value="0">Choose campaign</option>
    <option value="createCampaign">Create new campaign</option>
    <option>Campaign A</option>
    <option>Campaign B...</option>
  </select>
</div>
<div id="edit-delete-camp" class="btn-group" role="group">
  <button id="editCampaign" type="button" class="btn btn-default">Edit campaign name</button>
  <button id="deleteCampaign" type="button" class="btn btn-default">Delete campaign</button>
  <input type="text" class="form-control newCampain" id="nameCampaign">
  <button class="btn btn-default newCampain" id="butonSukcesJsonValu" type="button"  >Save</button>
</div>