ajaxComplete多次触发

时间:2015-03-25 11:02:52

标签: jquery ajax wordpress

我目前在我的网站上使用ajaxComplete的一段代码存在问题,并且它会持续多次触发。

这是实际系统的一些背景知识。我为wordpress开发了一个小插件,允许您输入开始日期,结束日期和参考代码。当您进入授课课程时,您可以添加,编辑和删除这些字段。

编辑部分是我目前遇到问题的地方,当我编辑现有课程日期时,我的代码逻辑会抓取该记录的数据并直接从数据库将其提供给表单。

我遇到的问题是,当我按下编辑按钮修改该记录的开始日期,结束日期和课程参考时,ajaxComplete请求将继续触发并在结果中刷新输入并再次获取默认数据,每隔5-7秒再添加一次。这没有给我足够的时间来编辑开始日期,结束日期和课程代码,然后按“更新”,因为字段将继续返回默认值。

无论如何我可以阻止这种情况发生吗?

$j("a.edit-date").live("click", function(e) {
            e.preventDefault;

            var target = $j(this);

            var postData = {};
            postData['data[_course-date-id]'] = target.attr('rel');
            postData['data[_course-post-id]'] = <?php echo $post->ID; ?>;
            postData['data[_cancel-edit]'] = 'no';

            $j.ajax({
                type: "POST",
                url: "<?php echo get_bloginfo('stylesheet_directory'); ?>/code/module-courses-edit-date.php",
                data: postData,
                success: function(msg) {

                    $j("#dates").ajaxComplete(function(event, request, settings) {

                        result = msg;
                        var json = $j.parseJSON(result)
                        var form = '<label>Edit the date below and hit update</label><br /><input type="text" class="course-start-date" name="_course-start-date" id="_course-start-date-' + json.course_date_id + '" placeholder="Start Date" value="' + json.course_start_date + '" /> &nbsp; <input type="text" class="course-end-date" name="_course-end-date" id="_course-end-date-' + json.course_date_id + '" placeholder="End Date" value="' + json.course_end_date + '" /> &nbsp; <input type="text" class="course-date-reference" name="_course-date-reference" id="_course-date-reference-' + json.course_date_id + '" placeholder="CDC 01" size="5" value="' + json.course_date_reference + '" /> &nbsp; <a href="#" id="update-date-' + json.course_date_id + '" class="button update-date" rel="' + json.course_date_id + '">Update</a> &nbsp; <a href="#" class="cancel-edit">Cancel</a>'

                        $j(this).html(form);

                    });

                }

            });

            return false;

        });

1 个答案:

答案 0 :(得分:1)

使用下面的代码。您已经成功运行,因此无需添加ajaxComplete请求。

          $j.ajax({
            type: "POST",
            url: "<?php echo get_bloginfo('stylesheet_directory'); ?>/code/module-courses-edit-date.php",
            data: postData,
            success: function(msg) {
                    var json = $j.parseJSON(msg);
                    var form = '<label>Edit the date below and hit update</label><br /><input type="text" class="course-start-date" name="_course-start-date" id="_course-start-date-' + json.course_date_id + '" placeholder="Start Date" value="' + json.course_start_date + '" /> &nbsp; <input type="text" class="course-end-date" name="_course-end-date" id="_course-end-date-' + json.course_date_id + '" placeholder="End Date" value="' + json.course_end_date + '" /> &nbsp; <input type="text" class="course-date-reference" name="_course-date-reference" id="_course-date-reference-' + json.course_date_id + '" placeholder="CDC 01" size="5" value="' + json.course_date_reference + '" /> &nbsp; <a href="#" id="update-date-' + json.course_date_id + '" class="button update-date" rel="' + json.course_date_id + '">Update</a> &nbsp; <a href="#" class="cancel-edit">Cancel</a>'

                    $j("#dates").html(form);
            }

        });