Refreshing the Div not working when link is inside

Question

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.

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

SpYk3HH · Accepted Answer · 2013-11-19T20:07:02.950

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

edited Nov 19 '13 at 20:07

answered Nov 19 '13 at 19:24

SpYk3HH

21,961
10
67
81

1

`live('click', function()` for older versions of jQuery – scrowler Nov 19 '13 at 19:25
@A.Wolff I would assume the down vote was because it would be better to bind to the `#div1-wrapper` than the document. – Blake Plumb Nov 19 '13 at 19:30
@BlakePlumb correct, that's why downvoter could have explain it, at least IMHO. Now, i appreciate SpYk3HH edit – A. Wolff Nov 19 '13 at 19:34
@A.Wolff *"better"* is a matter of argument if you'll see my update – SpYk3HH Nov 19 '13 at 19:35
@milacay That's what i'm here for :) ... I've got YEARS experience with JS and jQuery, so that one was purty ez. Ask anymore anytime and welcome so SO! – SpYk3HH Nov 19 '13 at 19:40
When I was voting down, there were nothing in the answer but first two code snippets making the same things. Reset my vote now. – Glen Swift Nov 20 '13 at 10:56

Refreshing the Div not working when link is inside

1 Answers1

Example