数据附加两次，只需调用单个事件

Question

我正在创建递归数据集。我几乎完成了它，但是当我在选项中添加问题时，嵌套子级中遇到了一个问题，因此假设如果我添加索引 3，它会增加两次，因此它会自动再添加两个索引 4 和 5。我在添加嵌套问题和嵌套选项时遇到的相同问题。我正在使用 avgrund 插件进行弹出窗口。

var ParentIndex = 1;
var QuestionIndex = 1;
var OptionIndex = 1;
var Question = {};
var Model = null;
$(function(){
    'use strict';
    $('body').on('click','[data-type=OQ]',function(){
        $(this).CreateQuestion();
    });
    $('body').on('click','[data-type=OPO]',function(){
        $(this).CreateOption();
    });
});
$.fn.extend({
        CreateQuestion: function(){
            var Parent = parseInt($(this).attr('data-parent'));
            Parent = isNaN(Parent) ? null : Parent;
            Model = $(this).avgrund({
             height: 500,
             holderClass: 'custom',
             closeByEscape: true,
             closeByDocument: true,
             showClose: true,
             showCloseText: 'x',
             onBlurContainer: '.container-scroller',
             template: '<form name="AddQuestion"> <div class="row"> <div class="col-sm-12"> <div class="form-group"><label>Title</label><input type="text" class="form-control" name="Title"/></div></div><div class="col-sm-12"> <div class="form-group"><label>Role</label><select name="Role" class="form-control">'+(Roles)+'</select></div></div><div class="col-sm-6"> <div class="form-group"> <label>Weight</label> <div class="input-group"><input class="form-control" placeholder="Weight" name="Weight" type="text"/><span class="input-group-append"><a class="btn btn-info text-white">%</a></span></div></div></div><div class="col-sm-6"><label>&nbsp;</label><div class="form-check form-check-flat mt-0"><input name="NotNA" type="checkbox" class="form-check-input"/> N/A</div> </div><div class="col-sm-12"> <div class="form-group"><a href="javascript:;" class="btn btn-success col-12" data-type="ADQ" data-index="'+QuestionIndex+'" data-parent="'+Parent+'"><i class="fa fa-plus"></i> Add Question </a></div></div></div></form>'
           });
           $('body').on('click','a[data-type=ADQ]',function(){
              var Data = {
                  'Question' : $('input[name=Title]').val(),
                  'Role' : $('select[name=Role]').val(),
                  'Weight' : $('input[name=Weight]').val(),
                  'NotNa' : $('input[name=NotNA]').prop("checked") ? 1 : 0,
                  'Options' : {},
                  'Parent' : $(this).attr('data-parent')
              };
              // Pushing Data to Object
              Question[QuestionIndex] = Data;
              // Increasing Index
              console.log('Before increasing QuestionIndex: ' + QuestionIndex);
              QuestionIndex++;
              console.log('After increasing QuestionIndex: ' + QuestionIndex);
              // Finding Entry Index
              var Index = parseInt(Object.keys(Question).length);
              console.log('Before Index of Question: ' + Index);
              // Defining Title
              var QuestionTitle = Question[Index].Question;
              // HTML
              var HTML = '<div class="mb-3" data-type="QRow" data-index="'+Index+'"> <div class="card border-success rounded"> <div class="card-header"> <div class="row"> <div class="col-sm-8 pt-1">'+QuestionTitle+'</div> <div class="col-sm-4 text-right"><a href="javascript:;" class="btn btn-info mr-1" data-type="OPO" data-parent="'+Index+'"><i class="fa fa-plus"></i> Add Option</a><a href="javascript:;" class="btn btn-danger" data-type="RQ" data-index="'+Index+'"><i class="fa fa-close"></i></a></div> </div> </div> <div class="card-body bg-light" data-type="OUNQ" data-parent="'+Index+'"></div> </div></div>';
              // Appending Question
              switch(Question[Object.keys(Question).length].Parent){
                  case "null":
                     // Append Question
                    $('[data-type=Questions]').append(HTML);
                    $('.avgrund-close').click();
                    console.log('After Index of Question: ' + Index);
                  break;
                  default:
                     // Append Question
                    $('[data-type=QUNO][data-parent='+Parent+']').append(HTML);
                    $('.avgrund-close').click();
                    console.log('After Index of Question: ' + Index);
              }
           });
       },
       CreateOption: function(){
           var Parent = parseInt($(this).attr('data-parent'));
           Parent = isNaN(Parent) ? null : Parent;
           Model = $(this).avgrund({
            height: 500,
            holderClass: 'custom',
            closeByEscape: true,
            closeByDocument: true,
            showClose: true,
            showCloseText: 'x',
            onBlurContainer: '.container-scroller',
            template: '<form name="AddOption"> <div class="row"> <div class="col-sm-12"> <div class="form-group"> <label>Name</label> <input type="text" class="form-control" name="Name"> </div> </div> <div class="col-sm-12"> <div class="form-group"> <label>Type</label> <select name="Type" class="form-control"> <option value="checkbox">Checkbox</option> <option value="radio">Radio</option> </select> </div> </div> <div class="col-sm-6"> <div class="form-group"> <label>Effect</label> <input type="text" class="form-control" name="Effect"> </div> </div> <div class="col-sm-6"> <div class="form-group"> <label>Point</label> <input type="text" class="form-control" name="Point"> </div> </div> <div class="col-sm-12"> <div class="form-check form-check-flat mt-0"> <input name="FatalError" type="checkbox" class="form-check-input"> FatalError</div> </div> <div class="col-sm-12"> <div class="form-group"><a href="javascript:;" class="btn btn-success col-12" data-type="ADO" data-index="'+OptionIndex+'" data-parent="'+Parent+'"><i class="fa fa-plus"></i> Add Option </a></div> </div> </div></form>'
          });
          $('body').on('click','a[data-type=ADO]',function(){
             var Data = {
                 'Option' : $('input[name=Name]').val(),
                 'Type' : $('select[name=Type]').val(),
                 'Effect' : $('input[name=Effect]').val(),
                 'Point' : $('input[name=Point]').val(),
                 'FatalError' : $('input[name=FatalError]').prop("checked") ? 1 : 0,
                 'Parent' : $(this).attr('data-parent')
             };
             // Pushing Data to Object
             Question[Parent].Options[OptionIndex] = Data;
             // Increasing Index
             console.log('Getting OptionIndex before increasing' + OptionIndex);
             OptionIndex++;
             console.log('Getting OptionIndex after increasing' + OptionIndex);
             console.log('Parent Index using for Question' + Index);
             var Options = Question[Parent].Options;
             // Appending Option
             var Index = parseInt(Object.keys(Options).length);
             console.log('Getting Option Index' + Index);
             var Name = '';
             //var Name = Options[Index].Option;
             //console.log('Getting Option Name' + Options[Index].Option);
             // Creating Option HTML
             var HTML = '<div class="mb-3" data-type="ORow" data-index="'+Index+'"> <div class="card border-success rounded"> <div class="card-header"> <div class="row"> <div class="col-sm-8 pt-1">'+Name+'</div> <div class="col-sm-4 text-right"> <a href="javascript:;" class="btn btn-success mr-1" data-type="OQ" data-parent="'+Index+'"><i class="fa fa-plus"></i> Add Question</a><a href="javascript:;" class="btn btn-danger" data-type="RO" data-index="'+Index+'" data-parent="'+Parent+'"><i class="fa fa-close"></i></a></div> </div> </div> <div class="card-body bg-light" data-type="QUNO" data-parent="'+Index+'"></div> </div></div>';
             // Append Question
            $('[data-type=OUNQ][data-parent='+Parent+']').append(HTML);
            $('.avgrund-close').click();
          });
       }
});

Answer 1

您可以尝试使用取消绑定单击和绑定单击功能

$('body').unbind('click).bind('click','a[data-type=ADQ]',function(){
});