如何在jQuery中停止附加的元素追加

Question

我有一段看起来像这样的页面：

所以，定期下拉。选择此项后：

这两个buttons消失，input元素显示。像这样：

当我选择不同于Create new campaign的某些内容时，这两个按钮会再次显示，input会消失。但是，如果尝试几次，它会继续添加此输入字段，即使我不想要它们。所以这是显示我的问题的jsfiddle。

我会发布一个尝试，我试图阻止那些额外的元素追加：

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 1

您将传播设置在if之外，因此它将无法再次工作。我更新了你的小提琴，检查出来：https://jsfiddle.net/492b0vcx/5/

我还编辑了你的HTML，并添加了一行css，希望它会有所帮助。

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">'); //This adds a new element each time
        //$('#edit-delete-camp').append('<button class="btn btn-default" id="butonSukcesJsonValu" type="button"  >Save</button>'); //This adds a new element each time
		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>