Question

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

基本上，这应如下所示：单击带有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('');
      });
    });

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

每次单击时，jQuery代码都会运行另一种类型

1 个答案: