Using jQuery's Ajax handler with a form submitted by checkbox 'onchanged' event

I'm try to conv开发者_如何转开发ert a form submission to jQuery's Ajax. The page holds a table - each row has a form with a checkbox where the onchanged property is submitting the form:

<input type="checkbox" value="" onchange="this.form.submit();"/>

Since I want to funnel any of the forms thru jQuery's Ajax handler I'm using a pattern i've seen plenty of examples use:

        $("form").live('submit', function (event) {
            alert("hit ajax");
            event.preventDefault();
            var form = $(this);
            $.ajax({
                url: form.attr('action'),
                type: "POST",
                data: form.serialize(),
                success: function (data) {
                    $("#myContainer").html(data);
                },
            });
        });

However, the code block above never executes - the form submits in the same fashion as before. Firebug doesn't report any errors - other jQuery functions on the page are working.

thx

Put the event listener in JQuery too:

HTML:

<input type="checkbox" id="myCheckbox" />

JQuery:

$('#myCheckbox').change(function(){
    $('#myForm').submit();
});

Also, IE won't play nice with that trailing comma in your example:

        success: function (data) {
            $("#myContainer").html(data);
        }, // <-- This guy

Instead use:

$("form input:checkbox").live('click', function (event) {

(overrides click handlers of all checkboxes on page) and add this to the bottom of the original code block:

this.form.submit();