Question

我页面上的正文是动态生成的，所以我必须把jQuery放在正文中：

<div>

<form action="insertMessage.php" method="post" name="contactForm" id="contactForm">
    Name:<br />
    <input type="text" id="inputName" name="inputName" value=""><br />
    Email:<br />
    <input type="text" id="inputEmail" name="inputEmail" value=""><br />
    Phone:<br />
    <input type="text" id="inputPhone" name="inputPhone" value=""><br />
    Comment:<br />
    <textarea name="inputComment" form="contactForm"> </textarea><br/>
    <input class="button color_pearl size_small" type="submit" id="inputSubmit" value="SEND">
</form>

<script type="text/javascript">
    $(document).ready(function(){
    //callback handler for form submit
        $("#contactForm").submit(function(e)
        {
            var postData = $(this).serializeArray();
            var formURL = $(this).attr("action");
            $.ajax(
            {
                url : formURL,
                type: "POST",
                data : postData,
                success:function(data, textStatus, jqXHR) 
                {
                    alert(data);
                },
                error: function(jqXHR, textStatus, errorThrown) 
                {
                    alert(data);     
                }
            });
            e.preventDefault(); 
        });
    });
</script>

    </div>

通过查看网络上的另一个论坛，我发现这应该可行，但页面的行为就好像jQuery不存在一样。表单只是正常POST，忽略了我的AJAX尝试。

所有其他jQuery，包括AJAX表单提交，都可以正常工作。这是唯一不适用于页面的东西，我怀疑它是因为它在体内。 jQuery，其余部分加载在页面顶部。

You can see page here.

Answer 1

将JS放入体内不会解决您的问题。如果在初始页面加载后加载内容，则需要使用委派事件。您是否尝试过将事件处理程序更改为

$(document).on("submit", "#contactForm", function(e){
  e.preventDefault();
  console.log("Oh look, I submitted!");
  // Other code here
}

详细了解jquery documentation (click here)

中的on函数和委派事件

Answer 2

在创建正文之前尝试使用它：

$(document).on('submit','#contactForm', function(){ .... });

这一直对我有用，因为如果你破坏并创建它在主体上绑定的新元素并且它搜索你在第二个字符串中放置的表单id或任何选择器，那么使用它就无所谓了。 “开”。

希望有所帮助

Answer 3

这是我改变的代码的一部分。试试这个并提供反馈：

    $(function(){
        $('body').on('submit','#contactForm', function(event){ 
            event.preventDefault(); 
            var postData = $(this).serialize();
            $.ajax(
            {
                url : 'insertMessage.php',
                type: "post",
                data : postData,
                success:function(data, textStatus, jqXHR) 
                {
                    alert(data);
                },
                error: function(jqXHR, textStatus, errorThrown) 
                {
                    alert(data);     
                }
            });
            return false;
        });

AJAX使用jQuery提交表单

3 个答案: