2014-09-12 1 views
0

매우 일반적인 scnerio에서 멈추었습니다.URL에서 태그가 리디렉션되지 않도록 하시겠습니까?

<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> 

내가 jQuery 코드 썼다 그래서 나는 나의 요구 사항에 대한 AJAX 페이지 매김을 원하는 : 나는 HTML 코드 YII 땡그랑 소리 PAGER 매김 위젯에 의해 생성 한

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

그러나 어떤을 클릭하여 <a> 태그 내가 e.preventDefault();을 사용했지만 여전히 JQuery 코드로 들어오지 않고 표시되지 않도록 경고하는 것을 방지하기 위해 href에 제공된 링크로 리디렉션됩니다.

도와주세요. 미리 감사드립니다.

+0

은 동적으로 생성 된 앵커 태그입니까? –

+0

@AnoopJoshi 예 YII 페이지 매김 위젯을 통해 생성합니다. –

+0

예제 코드로 jsfiddle을 만들었고 모든 것이 잘되어갔습니다. 경고를 봅니다. BTW는'load false;를'loadlistData'가 실행될 수 있도록 끝에 넣습니다. http://jsfiddle.net/w01ke3ts/ – frikinside

답변

4

앵커 태그가 동적으로 생성되기 때문에. 이벤트 위임을 사용해야합니다. 이벤트 바인딩시 DOM에 요소가 있어야하기 때문입니다. 이벤트 위임 이벤트의 경우, DOM

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

큰 감사 Anoop :) –

+1

오! 네가 옳아. 이렇게하면 문제가 해결됩니다. 나는 동적으로 생성 된 링크를 인식하지 못했습니다. – frikinside

0

사례 1 (직접)에 표시되는 document 또는 부모 요소에 바인더 제본됩니다

$ ("ul.yiiPager의 li.page의에") .on ("click", function() {...}); 나는 모든 ul.yiiPager li.page 내부의 ul.yiiPager li.page를 듣기를 원합니다. 클릭하면 뭔가 할 수 있습니다.

사례 2 (위임).

$ ("ul.yiiPager의 li.page")에 ("A"를 "클릭", 기능() {...}); ul.yiiPager li.page "a"인 자녀 요소가 클릭되면 무엇인가를하십시오.

요약

경우 1에서 각각의 해당 기간은 개별적으로 지시 사항이 제공됩니다. 새로운 기간이 생성되면 지시 사항을 듣지 못하고 클릭에 응답하지 않습니다. 각 a는 자체 이벤트를 직접 담당합니다.

경우 2의 경우 컨테이너에만 지시가 제공됩니다. 하위 요소를 대신하여 클릭 수를 파악해야합니다. 이벤트 잡기 작업이 위임되었습니다.

관련 문제