Код Jquery запускает один дополнительный тип при каждом нажатии

Question

Я пытаюсь добавить новый элемент списка в свое древовидное представление.

По сути, это должно работать следующим образом: щелкните значок с классом add-rule-btn, модальным (.add-new-rule)появляется. Он имеет поле ввода (# call-rule-name) и кнопку (# create-rule-btn). Вы вводите текст и нажмите на кнопку, и текст добавляется в качестве другого элемента в нижней части TreeView.

1004 * Теперь, когда я делаю это в первый раз, это работает отлично. Однако, если я хочу добавить еще один, и я нажимаю на значок, введите текст, нажмите на кнопку. Код выполняется дважды и добавляет два элемента. Когда я пытаюсь сделать это снова, код выполняется раз дерева, и так далее и так далее. 1006 * Кто-нибудь есть какие-либо идеи, почему это происходит? Заранее спасибо!

    $('.add-rule-btn').click(function(){
      var list;
      list = $(this).parent().next();
      $('#create-rule-btn').click(function(){
        var rule_name = $('#call-rule-name').val();
        list.append('<li class="treeview-animated-element"><span class="call-rule">' + rule_name + '</span></li>');
        $('.treeview-animated').mdbTreeview();
        $(".add-new-rule").modal("hide");
        $('#call-rule-name').val('');
      });
    });

Answer 1

Вы можете попытаться объявить список var снаружи. И поскольку он объявлен снаружи, вы можете получить доступ и изменить его внутри.

.add-rule-btn 

и

#create-rule-btn

Код образца:

var list;

$('.add-rule-btn').click(function(){

  list = $(this).parent().next();

});

$('#create-rule-btn').click(function(){
  var rule_name = $('#call-rule-name').val();
  list.append('<li class="treeview-animated-element"><span class="call-rule">' + rule_name + '</span></li>');
  $('.treeview-animated').mdbTreeview();
  $(".add-new-rule").modal("hide");
  $('#call-rule-name').val('');
});