事件傳播和Ajax後

我有以下代碼：事件傳播和Ajax後

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

的DIV中的HTML來自外部來源，我不知道它的結構和無法控制它。

我需要發佈一些數據，當這個鏈接被點擊。所以我在div元素上添加了一個onclick事件處理函數，希望事件會傳播，並使用jQuery ajax函數發佈數據。

在所有瀏覽器中都可以正常工作，但是Safari瀏覽器不會返回任何錯誤，但會調用回調函數，但由於某種原因無法訪問服務器。每次我收到請求時都會寫入數據庫。試圖手動加載在瀏覽器中發佈的網址 - 正常工作，並在db中創建記錄。也嘗試過FF和Chrome - 按預期工作。

將警報置於回調函數中時，它將被調用，但在Safari data = null中。

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

在這種情況下期望AJAX能夠工作嗎？有沒有更好的解決這個問題？

謝謝！

來源

2011-04-02 Dasha Salo

你停止點擊事件，所以瀏覽器不會嘗試按照someurl鏈接？ – daniellmb 2011-04-02 17:53:06

「沒有達到服務器的含義」是什麼？詳細描述您看到的內容以及衡量它的指標。 – 2011-04-02 17:57:19

不，我不會阻止它，因爲我確實希望它遵循鏈接並同時提交數據。 – 2011-04-02 17:57:54

這聽起來像是你需要delegate與異步AJAX結合起來。請注意，這幾乎從不是一件好事 - 唯一真正的例外是當您想要在離開頁面之前立即執行AJAX請求。

您的代碼可能是這個樣子：

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

這等待POST請求繼續跟隨鏈接之前完成。請注意，這比在成功回調中使用location = url要好，因爲此解決方案允許正常執行正常的瀏覽器操作，如中間單擊。

來源

2011-04-02 18:48:24 lonesomeday

去異步似乎很明智，但不起作用：http：// jaaulde。 com/test_bed/dasha_salo/index2.php另外，我不明白如何設置'window.location'的代碼是有問題的...對我來說工作正常，並沒有破壞任何點擊功能 – JAAulde 2011-04-02 18:58:06

@JAAulde它工作時我設置了'async：false'。對於白癡錯誤...對於你的示例中的中點擊將不起作用 - 鏈接將在當前窗口中打開，而不是新的。 – lonesomeday 2011-04-02 19:07:09

當更改爲async時：false作品！Gr吃點主意 - 謝謝！ – 2011-04-02 19:07:42

你想看看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/

來源

2011-04-02 18:01:38 JAAulde

我只是做getElementById（'parentDiv'）。onlick = function（）{...}。有什麼區別嗎？ – 2011-04-02 18:04:04

這是如何爲你制定的？大聲笑;）聽着，你已經在頁面上使用jQ。它的職責是在各種瀏覽器之間爲你平衡競爭環境。這裏的一個不同之處在於檢查事件源是否爲您執行，以確保您正確執行正確的交互行爲。 – JAAulde 2011-04-02 18:05:16

問題是我不知道div裏面的元素是什麼。如果我知道我會直接在元素上添加處理程序。 – 2011-04-02 18:06:18

事件傳播和Ajax後

回答

相關問題