jQuery 단 한 번 클릭

Question

다음 코드에서 <a></a>에있는 로더 요소가 두 번째 클릭에서 표시되지 않는 HTML 요소 중 하나를 클릭 할 수 있습니다. 모두는 처음으로 작동하고 두 번째 클릭에서 작동하지 않습니다. 누구든지 저를 찾아 볼 수 있습니까? 감사.

<li><a id="OVERALL_VALUE" href="javascript:void(0)" onclick="setTopDeals('OVERALL_VALUE')" class="topdeal">Top Deals</a></li> 
        <li><a id="PRICE" href="javascript:void(0)" onclick="setTopDeals('PRICE')" class="price">Price</a></li> 
        <li><a id="QUALITY" href="javascript:void(0)" onclick="setTopDeals('QUALITY')" class="quality">Star Rating</a></li> 


        <li><a id="list" href="javascript:void(0)" class="list">List View</a></li> 
        <li><a id="grid" href="javascript:void(0)" class="gallery">Gallery</a></li> 
        <li><a id="map" href="javascript:void(0)" class="map">Map View</a></li> 

디스플레이 로더

<a id="ajaxload_more3" style="display:none; width:200px; height:80px; border:1px solid #000; opacity:0.8; border-radius:10px; padding-top:20px; padding-bottom:25px; position:fixed; top:50%; left:50%; z-index:1000; text-align:center; background-color:#997CE6;"><table align="center"><tr height="50"><td><img src="images/ajaxload.gif" height="50" width="50" /></td></tr><tr height="35"><td><span style="font-size:20px; color:#FFF;">Loading</span></td></tr></table></a> 

스크립트

<script type="text/javascript"> 
     $("#OVERALL_VALUE").click(function() { 
      $("#ajaxload_more3").show("slow"); 
      $("#ajaxload_more3").delay(6000).fadeOut("slow"); 
     }); 
     $("#PRICE").click(function() { 
      $("#ajaxload_more3").show("slow"); 
      $("#ajaxload_more3").delay(6000).fadeOut("slow"); 
     }); 
     $("#QUALITY").click(function() { 
      $("#ajaxload_more3").show("slow"); 
      $("#ajaxload_more3").delay(6000).fadeOut("slow"); 
     }); 
     $("#list").click(function() { 
      $("#ajaxload_more3").show("slow"); 
      $("#ajaxload_more3").delay(6000).fadeOut("slow"); 
     }); 
     $("#grid").click(function() { 
      $("#ajaxload_more3").show("slow"); 
      $("#ajaxload_more3").delay(6000).fadeOut("slow"); 
     }); 
     $("#map").click(function() { 
      $("#ajaxload_more3").show("slow"); 
      $("#ajaxload_more3").delay(6000).fadeOut("slow"); 
     }); 
     </script> 

Answer 1

아이쿠, 먼저 Don't repeat yourself을 고려해야합니다. 모두 동일한 작업을 수행하고 왜 분리 된 선택자입니까? "자바 스크립트 : 무효 (0)"대신에 대신 "#"을 추가 class 직접 요소 선택기

$("li").on('click', 'a', function() { 
      $("#ajaxload_more3").show("slow"); 
      $("#ajaxload_more3").delay(6000).fadeOut("slow"); 
     }); 

Answer 2

시도를 사용하여 동적으로 DOM 요소를로드하기 때문에 그렇지 직후 (HREF 특성

Answer 3

을 제거 Javascript를로드 중입니다.) 클릭 이벤트는 새로 추가 된 요소에 바인딩되지 않습니다.

"켜기"또는 "라이브"바인딩을 사용해야합니다. 난이 도움이되기를 바랍니다 .. 그것을 시도 .. 여기

은 자바 스크립트에 대한 작동 코드의 대안입니다 ...

<script type="text/javascript"> 
    $("body").on("click", "#OVERALL_VALUE", function() { 
     $("#ajaxload_more3").show("slow"); 
     $("#ajaxload_more3").delay(6000).fadeOut("slow"); 
    }); 
    $("body").on("click, "#PRICE", function() { 
     $("#ajaxload_more3").show("slow"); 
     $("#ajaxload_more3").delay(6000).fadeOut("slow"); 
    }); 
    //CONVERT ALL THE ELEMENTS JUST LIKE THAT 
    </script> 

를 내가 바인딩 "의"사용을 제안 따라서 사용되지 않습니다 바인딩 라이브. 고맙습니다!

더 나은 방법

그리고 다른 회원에 의해 제안 .. 자신을 반복하지 마십시오 ..

대신 .. 이것에 HTML로 변환 :

    <li><a id="PRICE" class="ajaxLoadIt" href="javascript:void(0)" onclick="setTopDeals('PRICE')" class="price">Price</a></li> 
       <li><a id="QUALITY" class="ajaxLoadIt" href="javascript:void(0)" onclick="setTopDeals('QUALITY')" class="quality">Star Rating</a></li> 


       <li><a id="list" class="ajaxLoadIt" href="javascript:void(0)" class="list">List View</a></li> 
       <li><a id="grid"class="ajaxLoadIt" href="javascript:void(0)" class="gallery">Gallery</a></li> 
       <li><a id="map" class="ajaxLoadIt"" href="javascript:void(0)" class="map">Map View</a></li> 

그리고 스크립트 :

<script type="text/javascript"> 
$("body").on("click", ".ajaxLoadIt", function() { 
    $("#ajaxload_more3").show("slow"); 
    $("#ajaxload_more3").delay(6000).fadeOut("slow"); 
}); 

//CONVERT ALL THE ELEMENTS JUST LIKE THAT 
</script> 

Answer 4

fadeOut 함수 끝에 DOM 요소의 display이 none이므로 더 이상 표시되지 않습니다. 페이드 아웃 프로세스가 완료된 후에해야 할 일을 사용자 정의 로직에 추가해야합니다.