Question

我正在尝试运行两个脚本：一个用于使用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加载表单时，提交脚本停止工作。

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

Answer 1

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

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

然后在你的回调函数中，你需要调用applySubmitFormEvents（）。

Answer 2

如果提交按钮位于动态加载的内容中，则必须使用 $。live（）功能。

$("#submit").live("click", function(e){})

使用其他ajax脚本更改页面内容后，AJAX脚本无法正常工作

2 个答案: