Question

I have a page with 3 tabs on it. The first tab has a few cancel images with the class “cancelBtn”.

<img src="images/cancel.gif" alt="Cancel Order" class="cancelBtn" id="49" />

The first time the page loads the click event fires fine, if I move away from the frist tab and return the click event doesn’t fire. Each time a tab is clicked the html used on the tab including the cancel button is retrieved from the server.

Does anyone know why the event only fires on when the page is loaded? thanks

$(function () {
    $(".cancelBtn").click(function () {
        alert('hello');
        $.ajax({
            type: "POST",
            url: "Default.aspx/CancelOrder",
            data: "{}",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (msg) {
                $("#divResult").html(msg.d);
            }
        });
    });
});

Answer 1

Each time a tab is clicked the html used on the tab including the cancel button is retrieved from the server.

The click() event assigns the function only to the elements that exist at the time when it’s called. Use live to bind the event to “future” elements as well.

 $(".cancelBtn").live("click", function() {