表单数据未发布到 $.ajax url

Question

从自定义 CSS 模式发布我的表单时，数据将发布到当前 URL，而不是设置的 url。

$("form.delete_photo_form").submit(function(e) 
{
    e.preventDefault();

    $(".delete_photo_message").text("");


    $.ajax({
        url: 'assets/php/delete_photo.php',
        type: 'post',
        data:  $(this).serialize(),
        success: function(data, status) 
        {
            if (data == 1)
            {
                $(".delete_photo_message").text("Unable to delete photo");
            }                           
            else if (data == 2)
            {
                $(".delete_photo_message").text("Photo deleted");
                // checkGroup();
            }                           
            else
            {
                $(".delete_photo_message").text(data);  
            }
      },
      error: function(xhr, desc, err) {
        console.log(xhr);
        console.log("Details: " + desc + "\nError:" + err);
      }
    }); 

此表单是从另一个模态打开的模态发布的。

原始模态：

<div id="photo_buttons">

<a id="edit_photo_modal" class="button" href="#edit_photos_modal">

    Edit Photos

</a>
<div id="edit_photos_modal" class="modal_photos">
    <div>
        <a id="close_edit_photo" title="Close" href="#close"></a>


                                Edit Photos:


        <br></br>
        <br></br>
        <div class="edit_photos_div">
            <div class="photo_line">
                <img src="images/thumbnails/group/11/bb0878d2390cdcfb.jpg"></img>
                <br></br>
                <a id="edit_photo" class="open_modal" href="#modal_edit_photo_39">

                    Edit

                </a>


                                      /  


                <a id="delete_photo" href="#modal_delete_photo_39">

                    Delete

                </a>
                <br></br>
                <br></br>
            </div>                
        </div>
        <a id="finish_edit" class="button" title="Finish" href="#finish">

            Finish

        </a>
    </div>
</div>
<script src="assets/js/edit_photo.js"></script>

Second Modal（这是调用 ajax 帖子的地方）：

    <div id="edit_modals">
    <div id="modal_edit_photo_39" class="modal">
        <div>
            <a id="close_39" title="Close" href="#close">

                Close

            </a>
            <form id="edit_photo_form_39" class="edit_photo_form" method="post" action="">
                <h4>

                    Edit Photo

                </h4>
                <br></br>
                <h3 id="edit_photo_message" class="edit_photo_message"></h3>



                                            Title:

                <input id="edit_title" type="text" value="Test photo" name="edit_title"></input>



                                            Description:

                <textarea id="edit_desc" name="edit_desc" rows="3">

                    Test for resize

                </textarea>
                <br></br>
                <input type="hidden" value="11" name="group_id"></input>
                <input type="hidden" value="39" name="photo_id"></input>
                <input id="edit_photo_yes_39" class="edit_yes" type="submit" title="Edit" value="Edit" name="edit_yes"></input>
                <a id="cancel_edit" class="button" title="Cancel" href="#cancel_edit">

                    Cancel

                </a>
            </form>
        </div>
    </div>
    <div id="modal_delete_photo_39" class="modal">
        <div>
            <a id="close_39" title="Close" href="#close">

                Close

            </a>
            <form id="delete_photo_form_39" class="delete_photo_form" method="post" action="">
                <h4>

                    Are you sure you want to delete this photo?

                </h4>
                <br></br>
                <h3 id="delete_photo_message" class="delete_photo_message"></h3>
                <input type="hidden" value="11" name="group_id"></input>
                <input type="hidden" value="39" name="photo_id"></input>
                <input id="delete_photo_yes_39" class="delete_yes" type="submit" title="Yes" value="Yes" name="delete_yes"></input>
                <a id="del_no" class="button" title="No" href="#no">

                    No

                </a>
            </form>
        </div>
    </div>        
</div>

如果有人有任何想法，请告诉我。

旁注：

如果第二个模态框单独调用而不是从第一个模态框调用，则表单提交功能可以正常工作。

Answer 1

如果您根本不打算提交表单，为什么不使用按钮的 onclick 功能，并且在方法中调用 ajax。

尝试获取每个值并将它们全部发送以检查它们是否有东西

Answer 2

您可能是在$("form.delete_photo_form") 选择器运行后动态创建表单，或者模态脚本可能正在移动表单在 DOM 中的位置（即，一些模态脚本移动模态内容到<body> 标签的最后）。

在任何一种情况下，这都会导致您的提交逻辑无法运行。尝试替换：

$("form.delete_photo_form").submit(<handler>);

...与：

$(document).on("submit", "form.delete_photo_form", <handler>);

如果你不熟悉上面的语法，这是 jQuery 的 event delegation 语法，它允许你将事件处理程序绑定到永久的东西（如 document 对象），然后有选择地运行处理程序逻辑，如果事件符合特定标准（在这种情况下，事件必须是“提交”类型，并且必须源自与"form.delete_photo_form" 选择器匹配的元素）。这样做的好处是即使尚未创建相关的 DOM 节点，您也可以设置事件侦听器。