每次单击时，Jquery 代码都会运行一种附加类型答案

【问题标题】：Jquery code runs one additional type every time it's clicked每次单击时，Jquery 代码都会运行一种附加类型
【发布时间】：2019-10-10 01:44:24
【问题描述】：

我正在尝试将新列表项添加到我的树视图中。

基本上这应该如下工作：单击带有 add-rule-btn 类的图标，将显示模态（.add-new-rule）。它有输入字段（#call-rule-name）和一个按钮（#create-rule-btn）。您输入文本并单击按钮，您的文本将作为另一个项目添加到树视图的底部。

现在，当我第一次这样做时，它工作正常。但是，如果我想添加另一个并单击图标，输入文本，单击按钮。代码运行两次并添加了两项。当我尝试再次执行此操作时，代码会运行树次，依此类推。

有人知道为什么会这样吗？提前致谢！

    $('.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('');
      });
    });

【问题讨论】：

您的 $('#create-rule-btn').click 在 $('.add-rule-btn').click 内，这就是为什么当 make var list 时它也会获取旧数据。并附加它。在外面制作$('#create-rule-btn').click。
我在里面存储一个函数的原因是因为我需要在单击第一个按钮时获取列表，然后在单击第二个时使用它。如果我把它移到外面，我就不能在另一个函数中使用这个变量，

标签： javascript jquery

【解决方案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('');
});

【讨论】：

呵呵呵呵。很乐意为您提供帮助。