防止标签重定向到URL

Question

I am stuck at very normal scnerio. I have HTML code generated by YII CLINK PAGER Pagination widget :

<ul class="yiiPager" id="yw0">
      <li class="first hidden"><a href="/advisory_system/administrator/index.php/specialCategory/gridview?optget_grid=&amp;analysis_type=4&amp;_=1410520989427">&lt;&lt; First</a></li>
      <li class="previous hidden"><a href="/advisory_system/administrator/index.php/specialCategory/gridview?optget_grid=&amp;analysis_type=4&amp;_=1410520989427">&lt; Previous</a></li>
      <li class="page selected"><a href="/advisory_system/administrator/index.php/specialCategory/gridview?optget_grid=&amp;analysis_type=4&amp;_=1410520989427">1</a></li>
      <li class="page"><a href="/advisory_system/administrator/index.php/specialCategory/gridview?optget_grid=&amp;analysis_type=4&amp;_=1410520989427&amp;page=2">2</a></li>
 </ul>

and I want AJAX pagination for my requirement, so that I have wrote Jquery code :

 $("ul.yiiPager li.page a").on('click',function (e){
        e.preventDefault();
        alert($(this).attr('href'));
        return false;
        loadlistData($(this).attr('href'));
    }); 

But by clicking on any of the <a> tag it is redirecting to the LINK given in href for preventing that i have used e.preventDefault(); but still it is not coming in JQuery code and alert not showing.

Please help. Thanks in advance.

Answer 1

Since your anchor tags are created dynamically. You need to use event delegation. Because the elements should be present on the dom at the time of event binding. In the case of event delegation events are binded to the document or parent element which is presented on the dom

$(document).on('click', "ul.yiiPager li.page a", function(e) {
    e.preventDefault();
    alert($(this).attr('href'));
    loadlistData($(this).attr('href'));
});

Answer 2

Case 1 (direct):

$("ul.yiiPager li.page a").on("click", function() {...}); I want every ul.yiiPager li.page a inside ul.yiiPager li.page to listen up: when you get clicked on, do something.

Case 2 (delegated):

$("ul.yiiPager li.page").on("click", "a", function() {...}); ul.yiiPager li.page When any of your child elements which are "a" get clicked, do something with them.

Summary

In case 1, each of those spans has been individually given instructions. If new spans get created, they won't have heard the instruction and won't respond to clicks. Each a is directly responsible for its own events.

In case 2, only the container has been given the instruction; it is responsible for noticing clicks on behalf of its child elements. The work of catching events has been delegated.