Question

我有以下代码：

<div id="parentDiv">
    <a href="someurl"> ... </a>
</div>

div中的HTML来自外部源，我不知道它的结构，也无法控制它。

点击此链接后，我需要发布一些数据。所以我在div元素上添加了一个onclick事件处理程序，希望事件将传播，并使用jQuery ajax函数发布数据。

这在所有浏览器中运行良好，但Safari - 它不会返回任何错误，调用回调函数但由于某种原因无法到达服务器。每次收到请求时我都会写入数据库。试图在浏览器中手动加载帖子网址 - 工作正常，并在db中创建记录。还尝试了FF和Chrome - 按预期工作。

当向回调函数发出警报时，它被调用但在Safari数据= null。

$('#parentDiv').delegate( 'a', 'click', function()
{
    $.post('posturl', 
        { param1: 'test'}, 
        function(data)
        { 
            alert('data = '+data);
        },
        "json"
    );
});

期待AJAX在这种情况下工作是否正确？这个问题有更好的解决方案吗？

谢谢！

Answer 1

这听起来像是需要将delegate与异步AJAX结合起来。请注意，这几乎不是一件好事 - 唯一真正的例外是您希望在离开页面之前立即执行AJAX请求。

您的代码可能如下所示：

$('#parentDiv').delegate( 'a', 'click', function()
    $.ajax({
      type: 'POST',
      url: 'posturl',
      { param1: 'test'}, 
      dataType: 'json',
      async: false
    });
});

在继续关注链接之前，等待POST请求完成。请注意，这优于在成功回调中使用location = url，因为此解决方案允许正常浏览器操作，例如正常按照中键单击。

Answer 2

您想要查看jQuery的.delegate()方法。它告诉一个元素监听从某个元素冒出来的某个事件，并在观察到它时执行行为。您还希望阻止链接的默认操作，并在ajax操作完成时将浏览器发送到链接。

文档： http://api.jquery.com/delegate/

示例代码：

$( '#parentDiv' ).delegate( 'a', 'click', function( e )
{
    var url = this.href;

    e.preventDefault();

    $.post(
        'posturl', 
        {
            param1: 'test'
        },
        function(data)
        {
            alert('data = ' + data);
            window.location = url;
        },
        'json'
    );
} );

此：

委派活动
防止默认
等待ajax回复
将浏览器发送到链接

演示： http://jaaulde.com/test_bed/dasha_salo/

事件传播和ajax帖子

2 个答案: