JQuery GET works only first time, second time I just get server response... why?
<p>I have some JQuery where when you click on a "Add to Basket" button (it's really a link), the first time everything works as expected however click the button a second time, although the product is added to basket (database row has increased quantity), the response sent by server is outputted rather than "captured" by JQuery in the SUCCESS function.</p>

<p>I don't understand why this would happen, any thoughts on this?</p>

<p>JQuery</p>

<pre><code>$(function() {
            $( '.button' ).click(function( e ) {
                e.preventDefault();

                var url = $( this ).children( 'a' ).attr( 'href' );

                var elem = $( this ); 
                var parent = $( this ).parent().parent(); 
                var html = parent.html(); alert( html );

                $.ajax({
                    type: 'get',
                    url: url,
                    data: '',
                    cache: false,
                    dataType: 'text',
                    beforeSend: function( rs ) {
                        parent.html( '&lt;div class="basket-item item-border" style="width:896px;text-align:center;"&gt;&lt;p class="para"&gt;&lt;img src="/media/images/spinner.gif" /&gt;Please wait...&lt;/p&gt;&lt;/div&gt;' );
                    },
                    success: function( rs ) {
                        parent.html( html );

                        if( rs = 'YES' ) {
                            alert( 'Okay' );
                        } else {
                            alert( 'Something went wrong' );
                        }
                    },
                    error: function( rs, err ) {
                        if( rs.status == 0 ) {
                            alert( '--- Offline' );
                        } else if( rs.status == 404 ) {
                            alert( '404 Not Found' );
                        } else if( rs.status == 501 ) {
                            alert( '501 Internal Error' );
                        } else if( err == 'timeout' ) {
                            alert( '--- Timeout' );
                        } else {
                            alert( '--- Unknown' );
                        }
                    }
                 });
            });
        });
</code></pre>

<p>And here is a section of the HTML the JQuery works on</p>

<pre><code>&lt;div&gt;
            &lt;div class="basket-item item-border" style="width:512px;text-align:left;"&gt;
                &lt;p class="para"&gt;

                    &lt;img 
                        width="48" 
                        height="48" 
                        alt="Sample Soap Pack (&amp;pound;3.99)" 
                        src="http://www.mj.local/media/images/products/generic/0929005236213037.jpg" /&gt;
                &lt;a href="http://www.mj.local/products/sample-soap-pack/"&gt;Sample Soap Pack&lt;/a&gt;&lt;/p&gt;
            &lt;/div&gt;

            &lt;div class="basket-item item-border"&gt;&lt;p&gt;3.99&lt;/p&gt;&lt;/div&gt;
            &lt;div class="basket-item item-border" style="width:256px;text-align:center;"&gt;
                &lt;p class="button"&gt;&lt;a href="http://www.mj.local/shop/add/sample-soap-pack/"&gt;
                    &lt;span class="add"&gt;Add to Basket&lt;/span&gt;

                &lt;/a&gt;&lt;/p&gt;
            &lt;/div&gt;
        &lt;/div&gt;
</code></pre>

<p>The contents of the parent DIV are replaced with a "Please wait.." message and then restored, as expected so would this alter any way JQuery works? I have another JQuery working okay when swapping HTML so why now with this?</p>

<p>Thanks.</p>
