Question

我遇到了这个问题。我有AJAX in jQuery并且在success内部我创建了一个HTML标记，并将其附加到jQuery功能之外的HTML中。我的问题是我将附加的HTML标记将展开和折叠。当我在html标记中应用类名时，我不知道为什么它不会扩展崩溃的问题。

这是我的javascript：

<script type="text/javascript">
$(document).ready(function()
    {
        $('ul.group').delegate('a', 'click', function(event) {
        if ($(event.target).next().is(':visible')) {
            $(event.target).next().find('ul').slideUp(250, function() {
                $(event.target).next().slideUp(250);
            });
        } else {
            $(event.target).parent().siblings().find("ul").slideUp(250);
            $(event.target).next().slideDown(250);
        }
    });
});
</script>

这是我的css：

.group ul {
    display: none;
    padding: 5px 5px 5px 5px;
    margin-bottom: 5px;
    background: #cccccc;
}

这是我的HTML：

<div id="stage">

</div>

这是我的jQuery AJAX：

$( "#search_batch_structure" ).click(function(e)
    {
        e.preventDefault();

        $.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;

                        var html_stage = "<ul id='"+stageID+"' class='group'><li class='plusimageapply'><a onclick='return false;'>" + stagename + "&nbsp;" + stageorder + "</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;

                                        var html_batch = "<ul id='"+batchID+"' class='group'><li class='plusimageapply'><a onclick='return false;'>" + batchname + "&nbsp;" + batchorder + "</a>";
                                        $('#'+stageid).append(html_batch);

                                        $.ajax({
                                        url : '<?php echo base_url()?>project/search_project_structure_activity',
                                        type: 'POST',
                                        data: { 
                                                'batch_id': batchID,
                                              },
                                        success : function(activity)
                                                {
                                                    var activity = $.parseJSON(activity);
                                                    for (var i = 0; i < activity.length; i++)
                                                    {
                                                        activityID = activity[i].ActivityID;
                                                        activityname = activity[i].ActivityName;
                                                        activityorder = activity[i].ordActivity;
                                                        batchid = activity[i].BatchID;
                                                        var html_batch = "<ul><li class='selectedimage'>" + activityname + "&nbsp;" + activityorder + "</li></ul></li></ul></li></ul>";
                                                        $('#'+batchid).append(html_batch);
                                                    }


                                                }
                                        });
                                    }


                                }
                        });
                    }
                }
        });
    });

我在想它是不是因为它只能附加？有人可以帮帮我吗？

Answer 1

如果AJAX调用的success函数添加了ul.group元素，则在页面加载时无法将委派的事件处理程序绑定到它们。您需要将事件处理程序绑定到所存在的元素（即#stage）：

$('#stage').delegate('ul.group a', 'click', function(e) {
    // your logic here
});

在相关的说明中，如果您使用的是jQuery 1.7+，则应使用.on()的委托事件形式：

$('#stage').on('click', 'ul.group a', function(e) {
    // code
});

Answer 2

看起来您将事件处理程序委托给另一个也是动态生成的元素。您需要将处理程序绑定到未动态添加的元素。

而不是

$('ul.group').delegate('a', 'click', function(event) {

})

试

$(document).delegate('ul.group a', 'click', function(event) { //or any other element that stays in page

});

Jquery展开折叠无法在AJAX成功中运行

2 个答案: