Question

H_i

有任何想法提交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>

我想要提醒“Hello，myname”而不是提交。

谢谢

Answer 1

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

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

Answer 2

您的表单提交事件将无效，因为在执行时，表单可能无法加载相反，你应该在load事件的回调上编写事件，如下面的

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

在这种情况下也返回false;不起作用你需要使用event.preventDefault（）

Answer 3

您需要使用jQuery.on

来使用事件委派

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

Answer 4

尝试

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

从ajax加载的表单提交

4 个答案: