1

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.

Filburt
  • 17,626
  • 12
  • 64
  • 115
milacay
  • 171
  • 2
  • 17
  • 1
    you have to delegate event to **closest static container** : `$('#div1-wrapper').on('click','#Col1', function() {...});` – A. Wolff Nov 19 '13 at 19:23
  • Please reference answers here, a lot more documentation: http://stackoverflow.com/questions/8359085/delegate-vs-on – David Fleeman Nov 19 '13 at 19:29

1 Answers1

3

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

SpYk3HH
  • 22,272
  • 11
  • 70
  • 81