Question

我试图弄清楚如何避免在JavaScript中循环。我有这段代码：

$.ajax({
url : '<?php echo base_url()?>project/search_project_structure_stage',
type: 'POST',
data: { 
        project_id: $('#project_id').val()
      },
success : function(stages)
    {
        var stages = $.parseJSON(stages);
        for (var i = 0; i < stages.length; i++)
        {
            stageID = stages[i].ID;
            stagename = stages[i].StageName;
            stageorder = stages[i].ordStage;
            stagetypecode = stages[i].StageCode;
            projectid = stages[i].PID
            var html_stage = "<div class='row col-sm-10'><ol id='"+stageID+"' class='group_stage'>" +
                                "<li style='list-style:none' class='container span1'>" +
                                        "<a class='expand_batch'><i class='fa fa-folder'></i>&nbsp;&nbsp;&nbsp;" + stagename + 
                                          "&nbsp; [" + stagetypecode + 
                                            "]&nbsp;(" + stageorder + 
                                              ")</a>" +
                                                "<a class='icon_edit_stage' id='"+stageID+"'>" +
                                                  "<i class='fa fa-pencil fa-fw icon'></i>" +
                                                    "</a>" +
                                                      "<a class='scopy' sid='"+stageID+"' pid='"+projectid+"'>" +
                                                        "<i class='fa fa-copy fa-fw icon'></i>" +
                                                          "</a>";
            $('#stage').append(html_stage);

            $.ajax({
            url : '<?php echo base_url()?>project/search_project_structure_batch',
            type: 'POST',
            data: { 
                    'stage_id': stageID,
                  },
            success : function(batch)
                    {
                        var batch = $.parseJSON(batch);
                        for (var i = 0; i < batch.length; i++)
                        {
                            batchID = batch[i].BatchID;
                            batchname = batch[i].BatchName;
                            batchorder= batch[i].ordBatch;
                            stageid = batch[i].StageID;
                            projectid = batch[i].Project_ID;

                            var html_batch = "<ol id='"+batchID+"' class='group_batch batch'>" +
                                                "<li style='list-style:none' class='container span2'>" +
                                                  "<a class='expand_activity'>" +
                                                    "<i class='fa fa-list'></i>&nbsp;&nbsp;&nbsp;" + batchname + 
                                                      "&nbsp;(" + batchorder + 
                                                        ")</a>" +
                                                          "<a class='icon_edit_batch' id='"+batchID+"'>" +
                                                            "<i class='fa fa-edit fa-fw icon'></i>" +
                                                              "</a>" +
                                                                "<a class='bcopy' bid='"+batchID+"' sid='"+stageid+"' pid='"+projectid+"' data-toggle='modal'>" +
                                                                  "<i class='fa fa-copy fa-fw icon'></i>" +
                                                                    "</a>";
                            $('#'+stageid).append(html_batch);
                        }

                        $( ".bcopy" ).click(function()
                        {
                            batch_id = $(this).attr('bid');
                            stage_id = $(this).attr('sid');
                            batch_project_id = $(this).attr('pid');
                            $('#batch_id').val(batch_id);
                            $('#batch_stage_id').val(stage_id);
                            $('#batch_project_id').val(batch_project_id);
                            $('#myModalCloneBatch').modal('show');

                            $( "#clone_batch" ).click(function()
                            {
                                $.ajax({
                                    url : '<?php echo base_url('project/clone_batch')?>',
                                    type: 'POST',
                                    data:
                                        {
                                            batch_id : $('#batch_id').val(), 
                                            batch_stage_id : $('#batch_stage_id').val(), 
                                            batch_project_id : $('#batch_project_id').val(), 
                                            batch_name : $('#batch_name').val(), 
                                            batch_quantity : $('#batch_quantity').val()
                                        },
                                    success: function(msg)
                                        {

                                        }
                                });
                            });
                        });
                    }
            });
        }
        $( ".scopy" ).click(function()
        {
            stage_id = $(this).attr('sid');
            stage_project_id = $(this).attr('pid');
            $('#stage_id').append(stage_id);
            $('#stage_project_id').append(stage_project_id);
            $('#myModalCloneStage').modal('show');

            $( "#clone_stage" ).click(function()
            {
                $('#myModalCloneStage').modal('hide');
                document.getElementById('toggle-div').style.display='block';
                var target = document.getElementById('wrapper');
                var spinner = new Spinner(opts).spin(target);
                $.ajax({
                    url : '<?php echo base_url('project/clone_stage')?>',
                    type: 'POST',
                    data:
                        {
                            stage_id : $('#stage_id').text(), 
                            stage_project_id : $('#stage_project_id').text(), 
                            stage_name : $('#stage_name').val(), 
                            stage_code : $('#stage_code').val()
                        },
                    success: function(msg)
                        {
                            document.getElementById('toggle-div').style.display='none';
                            spinner.stop();
                            var msg = $.parseJSON(msg);
                            jo_number = $('#jo_number').val();
                            $('#cloned_jo_number').append(jo_number);
                            $('#myModalCloneStageSuccess').modal('show');       
                        }
                });
            });
        });
    }
});

您会注意到$( ".bcopy" ).click(function()位于for循环中。我只想在点击<a> tag与课程bcopy后如何避免这种情况。它不会遵循for loop？

当我点击<a> tag循环时，会发生这种情况。

Answer 1

你的问题不是很清楚，但如果你想按顺序发生事情，你应该尝试在jQuery中使用Deferred Object。

如果您希望仅在for循环之后分配click的处理程序，请在调用deferred.resolve()之前添加一个首先运行for循环的函数和另一个将处理程序第二个分配给延迟对象的函数。使用延迟对象帮助清理代码还有很多潜力。

Answer 2

将它放在循环边缘，因为它会多次渲染click事件脚本，并且在DOM加载后添加元素，您需要使用delegated event使其工作：

$("#stage").on('click','.bcopy',function()
{

// your code goes here

});

您可以从here

详细了解详情

单击a标签后避免循环

2 个答案: