CODEWITHSUNDEEP
jquery
milacay
milacay

Reputation: 171

Refreshing the Div not working when link is inside

What I try to accomplish is refreshing the data inside a DIV without reload entire page, but it is not working as expected.

I have this Jquery code:

<script src="http://code.jquery.com/jquery-latest.js"></script>
<script> 
$(document).ready(function() {
    $('#Col1').on('click', function() {
    var url = 'PurchaseRequestList.asp?order2=PRID';        
    $('#div1-wrapper').load(url + ' #div1'); 
    }); 
});
</script>

Below is the HTML codes

<div id="div1-wrapper">
    <div id="div1" style="border:solid 1px red; width: 100%;"> 
        <table width="90%" align="center" class="RowDetail">
            <tr>
                <td><a id="Col1">Column1</a></td>
                <td>Column2</td>
                <td>Column3</td>
                <td>Column4</td>
            </tr>
    </div>
</div>

If I moved the link (below) outside of the DIV, it will work. But if the link below is inside of the DIV that being refresh with data, it only work for the 1st click, and stop working after that. 

<a id="Col1">Column1</a>

Please help with a sample code if possible.

Upvotes: 1

Views: 194

Answers (1)

SpYk3HH
SpYk3HH

Reputation: 22580

Just simply change:

$('#Col1').on('click', function() {

to 

$(document).on('click', '#Col1', function(e) {

This is the old argument of direct vs delegated events. By using delegated events, you can ensure dynamically added elements maintain that event chain. In newer versions, such as seen in your example (using .on), you can delegate .on to either a parent of the element you want to target, or the document itself. Many feel targeting the document is bad practice as they claim overhead issues. Personally, I've been using this method since .on was introduced, have used it on at least 3 programs that see thousands of daily visitors and haven't had one complaint. I say, unless you're making a JS only video game, stick with $(document) as it it's easier to keep up with and allows you to continually "chain" delegated events as needed without ever recalling $(document)

$( selector ).live( events, data, handler );                // jQuery 1.3+
$( document ).delegate( selector, events, data, handler );  // jQuery 1.4.3+
$( document ).on( events, selector, data, handler );        // jQuery 1.7+

Example

Upvotes: 3

Related Questions