使用jQuery AJAX更新窗口小部件中的HTML的問題

Question

如果您有時間來幫助我，將非常感謝，因爲這是我第一次使用jQuery.ajax()方法。有一個鏈接到這裏的例子：

http://www.the-session.co.uk/ajax/

我有以下的HTML標記。我在頁面上有兩個小部件，小部件A和小部件B.內部小部件A是更新小部件B的元素，內部小部件B是用於更新小部件A的<a>元素。單擊時向服務器發出對任一小部件A的請求.php或widgetB.php，當A被點擊時，只有B應該更新，而當B被點擊時，只有A應該更新。

<div id="wrapper"> 
    <div class="container_12 clearfix" id="main_content"> 
     <div class="ajax_container width50 left"> 
      <?php include("widgetA.php"); ?> 
     </div> 
     <div class="ajax_container width50 left"> 
      <?php include("widgetB.php"); ?> 
     </div> 
    </div> 
</div> 

的HTML分兩個簡單的PHP包括在服務器上：

首先是widgetA.php

<div class="widget" data-widget="A" data-controls="B"> 
    <div class="header"> 
     <h2>Widget A</h2> 
    </div> 
    <div class="body"> 
     <p><?php echo date('h:i:s'); ?></p> 
     <p><a href="#">Updated widget B</a></p> 
    </div> 
</div> 

和第二是widgetB.php

<div class="widget" data-widget="B" data-controls="A"> 
    <div class="header"> 
     <h2>Widget B</h2> 
    </div> 
    <div class="body"> 
     <p><?php echo date('h:i:s'); ?></p> 
     <p><a href="#">Updated widget A</a></p> 
    </div> 
</div> 

到目前爲止，我已經寫了遵循jQuery腳本，但我不認爲我正在委託e正確通氣。當我點擊Widget A中的<a>元素並在AJAX調用後使用.replaceWith()方法時，看起來DOM更新時事件處理程序不再附加到Widget中的元素上了。我最初使用jquery進行選擇應該是.ajax_container嗎？

其次是有我在其中可以使用.data()方法，以便通過利用屬性在PHP data-widget和data-controls包括更新微件的方法嗎？

最後有沒有辦法避免使用兩個單獨的AJAX調用，以減少代碼冗餘？我似乎在重複第二次AJAX調用。

$(function() { 

    $(".widget[data-widget='A']").on('click', 'a', function(e) { 
     $.ajax("widgetB.php", { 
      cache: false 
     }).done(function(html) { 
      $(".widget[data-widget='B']").replaceWith(html); 
     });  
     e.preventDefault(); 
    }); 


    $(".widget[data-widget='B']").on('click', 'a', function(e) { 
     $.ajax("widgetA.php", { 
      cache: false 
     }).done(function(html) { 
      $(".widget[data-widget='A']").replaceWith(html); 
     });  
     e.preventDefault(); 
    }); 
}); 

Answer 1

我想這就是你要找的。它將兩個功能合併爲一個，利用數據屬性並正確替換內容。

$(".widget[data-widget]").on('click', 'a', function(e) { 
    var widgetClicked = $(this).data("widget"); 
    var widgetControls = $(this).data("controls"); 

    $.ajax("widget" + widgetControls + ".php", { 
     cache: false 
    }).done(function(html) { 
     $(".widget[data-widget='" + widgetControls + "']").html(html); 
    });  
    e.preventDefault(); 
});