jquery - 从 ajax 加载的表单提交

Question

你好

有没有人提交 ajax 加载表单的想法：www.example.com/form.php 是

<form>
    <fieldset>
        <legend>Your name?</legend>
        <input type="name" id="name" />
        <button type="submit">OK!</button>
    </fieldset>
</form>

和 www.example.com/index.php 是

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Myform</title>
        <script type="text/javascript" src="jquery.js"></script>
    </head>
    <body>
        <div id="formDiv"></div>
        <button id="open">Open</button>
        <button id="close">Close</button>
        <script type="text/javascript">
            (function($) {
                $(document).ready(function() {
                    $('#open').click(function() {
                        $('#formDiv').load('www.example.com/form.php');
                    });
                    $('#close').click(function() {
                        $('#formDiv').empty();
                    });
                    $('#formDiv form').submit(function() {
                        alert("Hello, "+($('#formDiv form #name').val())+"!");
                        return false;
                    });
                });
            })(jQuery);
        </script>
    </body>
</html>

我希望提醒“你好，我的名字”而不是提交。

谢谢

score 5 · Accepted Answer

使用事件委托为动态加载的表单设置事件处理程序：

$('#formDiv').on('submit', 'form', function(event) {
    alert("Hello, "+($('#name').val())+"!");
    return false;
});

score 3 · Accepted Answer

您的表单提交事件将不起作用，因为当它被执行时，表单可能不会被加载相反，您应该在加载事件的回调中编写事件，如下所示

$('#formDiv').load('www.example.com/form.php',{},function() {
    $('#formDiv form').submit(function(event) {
        event.preventDefault();
        alert("Hello, "+($('#formDiv form #name').val())+"!");
    });
});

在这种情况下也返回 false；将不起作用，您需要使用 event.preventDefault()

score 2 · Accepted Answer

您需要使用jQuery.on使用事件委托

$('#formDiv').on('submit', 'form', function() {
    alert("Hello, "+($('#formDiv form #name').val())+"!");
    return false;
});

score 0 · Accepted Answer

尝试

 $('#formDiv form').live('submit',function() {
           alert("Hello, "+($('#formDiv form #name').val())+"!");
           return false;
    });

jquery - 从 ajax 加载的表单提交

4 回答 4

Related

Reference