AJAX強制頁面刷新（但不應該）

使用JQuery的簡單AJAX測試頁面。顯示頁面最初顯示按鈕（BUTTON1）。點擊後，它將通過script.js運行react.php。 react.php將通過span元素用BUTTON2替換BUTTON1。所有這些工作。AJAX強制頁面刷新（但不應該）

這是出錯的地方。點擊BUTTON2應該通過script2.js運行react2.php。 react2.php應該用文本「SUCCESS」代替BUTTON2。不過，當點擊BUTTON2時，頁面會刷新（並再次顯示BUTTON1）。

當initial.php頁面上的按鈕類從button1更改爲button2時，button2被成功替換爲react2.php中的字符串。我無法理解這一點。

如何防止刷新，以便頁面在span元素中顯示「SUCCESS」？在此先感謝！

beginning.php

<html> 
<script type="text/javascript" src="jquery.min.js"></script> 
<script type="text/javascript" src="script.js"></script> 
<script type="text/javascript" src="script2.js"></script> 
<?php 
echo "<span class='span_display'> 
    <a href='' id='button1' class='button1'>BUTTON1</a>&nbsp; 
</span>"; 
?> 
</html>

的script.js

$(function() { 
    $(".button1").click(function() { 
     $.ajax({ 
      url: "react.php", 
      cache: false, 
      success: function(html) { 
       $(".span_display").html(html); 
      } 
     }); 
     return false; 
    }); 
});

script2.js

...(all the same except) 
    url: "react2.php",

react.php

<?php 
echo "<a href='' id='button2' class='like_button2'>BUTTON2</a>&nbsp;"; 
?>

react2.php

<?php 
echo "SUCCESS"; 
?>

來源

2013-10-20 i_love_nachos

因爲您的腳本無法識別button2。你必須把它放在你的標記中（隱藏它，然後在你點擊第一個按鈕後顯示它），或者你必須在react.php中輸出你的button2點擊處理程序。將盡管與第一個選項。我不把它作爲答案發布，因爲我不是100％確定第二個選項，我沒有時間現在就測試它。 – lexith

感謝您的回答。我很抱歉，你能否用一些提示或例子來說明如何把這個原則變成代碼？你的意思是：[鏈接]（http://www.w3schools.com/jquery/jquery_hide_show.asp）？初學者在這裏。 –

由於您似乎是SO上的新用戶，我想鼓勵您[參觀]（http://stackoverflow.com/about）或閱讀[幫助頁面]（http：// stackoverflow。 com/help）如何（以及爲什麼）接受答案。 ;-)請不要使用w3schools作爲資源，而是使用[官方文檔]（api.jquery.com/）。 – nietonfir

您的問題是由於第二個鏈接上丟失的點擊處理程序導致的，因爲它是通過ajax動態添加的。這是一般建議使用delegated events，而不是直接連接處理程序要素：

function handler(uri) { 
    $.ajax({ 
     url: uri, 
     cache: false, 
     success: function(html) { 
      $(".span_display").html(html); 
     } 
    }); 
} 

$(document) 
    .on("click", "#button1, #button2", function(e) { 
     e.preventDefault(); 
     var uri = $(this).hasClass("button1") ? "react.php" : "react2.php"; 
     handler(uri); 
    }); 
});

的jQuery documentation解釋了它華麗的，所以我就引用它：

委託事件有優勢，他們可以處理來自後代元素的事件，這些元素將在稍後添加到文檔中。通過挑選一個在連接了委託事件處理程序時保證存在的元素，可以將委派事件用於，從而避免需要經常附加和刪除事件處理程序。例如，這個元素可能是模型 - 視圖 - 控制器設計中的視圖的容器元素，或者處理程序想要監視文檔中的所有冒泡事件的文檔。文檔元素在加載任何其他HTML之前在文檔的頭部中可用，因此在沒有等待文檔準備就緒的情況下附加事件是安全的。

除了他們來處理後代元素事件的能力尚未創建，委派事件的另一個優點是當許多元素都必須監控他們低得多的開銷潛力。

來源

2013-10-20 22:59:32 nietonfir

我花了一段時間才明白這個代碼以及它應該如何工作，但我認爲我現在就明白了原則。但它仍然不起作用。我把你的代碼片段放到script.js中，並在begin.php中禁用script2.js。現在單擊BUTTON1刷新頁面以再次顯示BUTTON1。 –

@Minion你會介意在[jsBin]（http://jsbin.com）創建一個簡短的例子嗎？ – nietonfir

我現在工作了。你的方法做到了。這只是我在導入代碼時在script.js文件中留下了一個簡單的錯誤。非常感謝你。 –

問題是button2是由Ajax創建的。

在按鈕2存在之前，script2.js在頁面的第一次加載時執行，因此無法將任何事件綁定到button2（它不存在）。

當按鈕2被創建，然後點擊它作爲一個正常的按鈕提交頁面。

~~要麼加載按鈕2後，必須強制腳本2運行。您可以通過在創建按鈕後在腳本1中成功調用script2中的方法來完成此操作。~~

~~或者你可以看看jQuery中的實時事件，他們可以鎖定到創建的新元素。~~

~~在這種情況下，我會選擇1，但它更乾淨，更具可預測性。~~

使用從nietonfir腳本，它更容易。

來源

2013-10-20 22:43:58

請閱讀[jQuery文檔]（http://api.jquery.com/on/）關於'on（）'和一般委託事件。 OPs場景可以通過一個事件監聽器輕鬆處理（對目標URI進行較小的邏輯調整）。 '//只是爲了確保dom已經完成了'應該是你做錯了第一個暗示。 – nietonfir

我記下了現場活動，這是代表活動的舊名稱。我仍然認爲這是一個糟糕的解決方案，因爲如果你在不同層次上有許多不同的事件，它可以使更復雜的頁面。在這種情況下，我認爲直接解決方案更好，特別是如果可能有許多不同的新按鈕應該綁定到不同的事件，但這是一個意見問題。我的答案是否有任何錯誤？ –

關於Dom整理的注意事項是，我對html命令的記憶至少在dom真正準備好之前完成。這可能會更好，但對於較舊的瀏覽器，它仍然可能是有效的，除非jquery使它完全確定dom已完成。 –

AJAX強制頁面刷新（但不應該）

回答

相關問題