Issue with using jQuery AJAX to update the HTML inside widgets
<p>If you have the time to help me it would be much appreciated as this is my first time using the <code>jQuery.ajax()</code> method. There is a link to the example here:</p>

<p><a href="http://www.the-session.co.uk/ajax/" rel="nofollow">http://www.the-session.co.uk/ajax/</a></p>

<p>I have the following HTML markup. I have two widgets on the page, Widget A and Widget B. Inside Widget A is an <code>&lt;a&gt;</code> element to update Widget B and inside Widget B is an <code>&lt;a&gt;</code> element to update Widget A. When clicked a request to the server is made for either widgetA.php or widgetB.php, when A is clicked only B should update and when B is clicked only A should update.</p>

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

<p>The HTML points to two simple PHP includes on the server:</p>

<p>First is <code>widgetA.php</code> </p>

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

<p>and second is <code>widgetB.php</code> </p>

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

<p>So far I have written the following jQuery script, but I don't think I am delegating the event properly. When I click the <code>&lt;a&gt;</code> element inside Widget A and use the <code>.replaceWith()</code> method after the AJAX call it seems that when the DOM is updated the event handlers are not longer attached to the  element in widget B. Should my initial selection with jquery be <code>.ajax_container</code>?</p>

<p>Secondly is there a way in which I can use the <code>.data()</code> method in order to update the widgets by making use of the attributes <code>data-widget</code> and <code>data-controls</code> in the PHP includes?</p>

<p>Finally is there a way to avoid using two separate AJAX calls in order to make this code less redundant? As I seem to be repeating myself with the second AJAX call.</p>

<pre><code>$(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();
    });
});
</code></pre>
