0

我正在尝试运行两个脚本：一个用于使用 ajax 加载页面内容，另一个使用 ajax 提交联系表单。

加载页面内容：

<script>
$('#top_links a').click(function (e) {
    e.preventDefault();
    var link = $(this).attr('href');
    $('#content').empty();


    $.get(link, { }, 
        function(data) {
            $('#content').replaceWith($(data).find("#content"));

        }
    )
});
</script>

提交表格：

<script type="text/javascript">

$('#submit').click(function(event){

    event.preventDefault();
    var name = $('#name').val();
    var email = $('#email').val();
    var message = $('#message').val();
    $.post("<?php echo bloginfo( 'template_directory' ) . '/inc/mailit.php';?>", 
        {
        name: name,
        email: email,
        message: message
        },
        function(data) {
            var n = data.indexOf('<span class="success_message">');

            if (n !== 0) {
            $('#message_box_1').empty().append(data);
            } else {
            $('#contact_form').empty().append(data);

            }
        }
    );
});


</script>

这两个脚本都在页脚中，不包含在动态加载的内容中。当我直接访问联系页面而不使用 ajax 加载其内容时，表单代码可以完美运行。但是当我使用 ajax 加载表单时，提交脚本停止工作。

这实际上是我之前发布的问题的后续问题。经过一番思考，我不能 100% 确定我之前收到的答案是准确的。答案依赖于表单提交代码是加载内容的一部分的假设，但事实并非如此，因为我将所有代码放在不受内容更改影响的页脚中。由于我无法取消选中答案，因此我需要重新发布。

4

2 回答 2

1

加载表单后，您需要运行提交表单脚本。

尝试将您的提交表单脚本包装在一个函数中，例如 applySubmitFormEvents() {...} 或类似的东西。

然后在您的回调函数中，您需要调用 applySubmitFormEvents()。

于 2012-07-04T03:34:27.950 回答
0

如果提交按钮在动态加载的内容中，则必须使用$.live()函数。

$("#submit").live("click", function(e){})
于 2012-07-04T03:38:14.933 回答