Ajax发布完成后触发点击事件

Question

I am trying to trigger a click event once and Ajax post is complete. However, it is not firing because the element is not available in the DOM. I call a jQuery .load method in the success callback of the Ajax post to load the new DOM element.

Ajax post:

$.ajax({
    type: "POST",
    url: $formAction,
    data: $form.serialize(),
    success: function (result) {
        if (result.constructor === Array) {
            $categoryValidationPanel.html('');
            $.each(result, function (index, value) {
                $categoryValidationPanel.append("<li>" + result[index].ErrorMessage + "</li>")
            });
        } else {
            $dialog.modal('hide');
            refreshComplaintCategoryResults(); //Call to load method below
        }
    },
    error: function () {
        alert("There was a problem processing your request, please try again.");
    }
}).done(function () {
    $("tr[data-action-url='/Admin/ComplaintWorkflow/Edit?categoryId=" + $categoryId + "']").trigger("click");
});

Load method:

function refreshComplaintCategoryResults() {
    $(".complaint-category-results").load('ComplaintWorkflow/GetComplaintCategoryResults');
}

I would expect the order of execution to be:

1. Ajax post
2. On success load newly created element into DOM via refreshComplaintCategoryResults()
3. do .done and trigger click on newly created DOM element

However, this is not the case, the .load method call is in pending state until after the .done is executed and hence the DOM is not updated.

I have also tried this in the .load method (passing the categoryId from the ajax post):

function refreshComplaintCategoryResults(categoryId) {
    $(".complaint-category-results").load('ComplaintWorkflow/GetComplaintCategoryResults', function () {
        $("tr[data-action-url='/Admin/ComplaintWorkflow/Edit?categoryId=" + categoryId + "']").trigger("click");
    });
}

Can anyone suggest what I am missing here?

UPDATE:

I have now got newly created element in the DOM and then the relevant trigger code being executed, however, for some reason it does not execute. I updated the load method to (thanks @TrueBlueAussie for his comments on this):

function refreshComplaintCategoryResults(categoryId) {
    $.get("ComplaintWorkflow/GetComplaintCategoryResults", function (result) {
        $(".complaint-category-results").html('');
        $(".complaint-category-results").html(result);
    })
    .done(function () {
        $("tr[data-action-url='/Admin/ComplaintWorkflow/Edit?categoryId=" + categoryId + "']").trigger("click");
    });
}

The trigger code is not working. I have debugged in the console and the selector definitely works. If I let the code run through and then execute the same code in the console, the trigger works.

Any ideas?

Answer 1

Using jquery deferred objects is the best solution here. You can chain the callback as required after the completion of ajax request.Here is a link about how to use jquery deferred objects - http://api.jquery.com/category/deferred-object/