jquery form in qtip not submitting with ajax

Question

I am having a problem getting this ajax form to submit within qtip ... It does submit but it ignores the e.PreventDefault() and just loads the in browser. Additionally it doesn't disable the submit button so it's like the code isn't even being called. I tried running it in the success: function and events: ... any help in this matter would be greatly appreciate.

JS:

    var editgallerysubmit    = $("#EditGallerySubmit");
var editgalleryform      = $("#EditGalleryForm");
var editgalleryresults   = $('#EditGalleryResults');

//Edit Gallery Form


//Edit Form When Hovering Over Gallery Name
$('.EditGallery').on('click', function (e) {
    e.preventDefault();
});

$('.EditGallery').each(function()
{


    $(this).qtip({
        content:  {
            text: "Loading...",
            ajax: {
                url:$(this).attr('href'),
                type: "GET",
                success: function(data, status) {   
                this.set('content.text', data);

                }                
            }
        },
        hide: {
            fixed: true,
            delay: 100
        },
        events: {
            render: function(event, api) {
                editgalleryform.bind('submit', function(e) {

                        $.ajax({
                            url: editgalleryform.attr('action'),
                            data: editgalleryform.serialize(),
                            type: 'post',
                            success: function(data, status, jqXHR) {

                            },
                            beforeSend: function() { editgallerysubmit.attr('disabled', ''); },
                            complete: function() { editgallerysubmit.removeAttr('disabled'); }
                        });

                        e.preventDefault();
                });
            }
        },
        style: 'wiki'
    });
    $(this).qtip('click', true);
});

PHP:

    $MemberGalleriesQuery = $bapcity->query("SELECT * FROM CroMemberRetailGalleries WHERE UserID='".$_SESSION['user_id']."' ORDER BY GalleryID DESC");
            $MemberGalleriesCount = $MemberGalleriesQuery->num_rows;

            if ( $MemberGalleriesCount ) 
            {
                $BaseHeight = 150;
                $GalleriesBoxHeight = $BaseHeight + ( 20 * $MemberGalleriesCount );
                echo '
                <div id="ManageGalleries" style="height: '.$GalleriesBoxHeight.'px" align="center">
                <div id="ManageGalleriesHeader">Manage Galleries</font></div><br><br>
                <font color="#000000"><b>Click Gallery To Edit</b></font><br><br>
                ';

                while($GalleryData = $MemberGalleriesQuery->fetch_assoc())
                {
                    echo '>> <b><a class="EditGallery" href="Crowork.Backend/Crowork.EditGallery.php?gallerykey='.$GalleryData['GalleryID'].'">'.$GalleryData['GalleryName'].'</a></b> <<<br>';
                }

                echo '<br><br></div>';
            }
            $MemberGalleriesQuery->free();

THE FORM PHP FILE:

    <form id="EditGalleryForm" action="Crowork.Backend/Crowork.EditGallery.php?action=DoEditGallery&gallerykey=<?php echo $GalleryData['GalleryID']?>" method="post">
    <table border="0" width="100%">
    <tr>
        <td colspan="2" align="center"><font size="-1"><b>NOTE:</b> Letters & Numbers Only</font></td>
    </tr>
    <tr>
        <td>Name:</td>
        <td><input type="text" name="GalleryName" size="30" value="<?php echo $GalleryData['GalleryName']?>"></td>
    </tr>
    <tr>
        <td align="right" colspan="2">
            <input type="hidden" name="OriginalGalleryName" value="<?php echo $GalleryData['GalleryName']?>">
            <input type="hidden" name="GalleryID" value="<?php echo $GalleryData['GalleryID'] ?>">
            <input id="EditGallerySubmit" type="submit" name="EditGallery" value="Edit Gallery">
        </td>
    </tr>
    </table>
    </form>

ALL THE JAVASCRIPT CODE WORKS EXCEPT THIS PART THAT HANDLES SUBMISSION OF THE FORM.

    editgalleryform.bind('submit', function(e) {

                    $.ajax({
                        url: editgalleryform.attr('action'),
                        data: editgalleryform.serialize(),
                        type: 'post',
                        success: function(data, status, jqXHR) {

                        },
                        beforeSend: function() { editgallerysubmit.attr('disabled', ''); },
                        complete: function() { editgallerysubmit.removeAttr('disabled'); }
                    });

                    e.preventDefault();
            });

Answer 1

Try to bind click event on submit button like,

editgallerysubmit.click(function() {
   $.ajax({ /** You ajax code */ });
   return false;// to prevent page reload                       
});

If your form is dynamically created then you need to use bind click event like,

// var editgallerysubmit will not work here bcoz it is dynamically created and your js rendered previously
$('#EditGallerySubmit').click(function() {
   $.ajax({ /** You ajax code */ });
   return false;// to prevent page reload                       
});