Jquery works only on first page load (ajax paganation)

Question

Only problem: jquery won't trigger the click event of my anchor link for rest of the ajax loaded pages except on first page.

There are already many answers found with this topic but none of them works for me.

Things Ive tried: (pls take a look..I might implement it in the wrong way)

1.) Wrapping with div data-role="page" first before the click event:

 $('a[id^="preview"]').wrap('<div data-role="page" />');
 //... click event code.. see below

2.) Using the body to capture event on specified link

$('body').on('click','a[id^="preview"]',function(e) {
//... click event code.. see below

3.) Tried putting the script on head or in body.

4.) Tried putting the the script externally or within body.

All of the things I've tried fails. Just working on the 1st page.

---

Here's my code for the click event and works perfectly on first load (1st page):

$('a[id^="preview"]').on('click',function(e) {   
        alert('preview clicked');
 });

Note:

I'm using $('a[id^="preview"]') because the link are dynamically created with number suffix. eg preview1, preview2...etc.

Answer 1

Try to simplify your example and add this code to see if that works if it does expand fromt here.

Demo: http://jsfiddle.net/9hpaL/

$('button').click(function(){
$('body').append('<br><a href="#">Click me<a/>')
});

$('body').on('click', 'a', function(){
alert('It works!');
});