qtip中的jQuery表單未與Ajax一起提交

Question

我在讓這個Ajax表單在qtip中提交時遇到問題...它確實提交了，但是它忽略了e.PreventDefault（），只是在瀏覽器中加載了。 另外，它不會禁用“提交”按鈕，因此就好像根本沒有調用代碼。 我嘗試成功運行它：函數和事件：...在此問題上的任何幫助將不勝感激。

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();

表格PHP文件：

    <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>

除處理提交表格的這一部分以外，所有Java代碼均有效。

    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

嘗試在提交按鈕上綁定點擊事件，例如，

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

如果您的form是動態創建的，則需要使用bind click事件，例如

// 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                       
});