JQuery/javascript : 동적 갤러리의 이미지는 링크로 사용할 수 있지만 버튼으로는 사용할 수 없습니다. 왜?

Question

현재 웹 사이트를 구축 중이며 몇일 동안 온라인 포트폴리오에 어려움을 겪고 있습니다. 과도하게 인터넷을 검색했지만 단어로 내 문제를 표현하는 방법을 정확히 알지 못했고 여러 가지 해결 방법을 시도했습니다. http://tympanus.net/Development/Stapel/

나는 그것의 애니메이션과 스타일을 좋아하지만 내가 추가 싶어요 : 내가 여기에있는 포트폴리오 섹션에 갤러리를 추가 http://dzisign.de/jquerytest/fade.html

:

여기 웹 사이트 베타를 방문하시기 바랍니다 내 문제를 보려면 "제 3의 수준". 기본적으로 스택은 이미지를 격자로 배포합니다. 로드 된 이미지에는 링크가있어서 클릭하면 웹 사이트로 연결됩니다. 대신 이미지를 클릭 할 때 새 요소를 트리거하려고합니다. 더 큰 이미지와 옆에 정보 영역이있는 div에 대해 생각해보십시오. 불행히도 갤러리 이미지를 버튼으로 사용할 수 없습니다. jquery 함수를 호출하기 위해 id를 할당하려고 시도했지만 클릭이 인식되지 않습니다. 오늘 나는 가능한 문제를 발견했다. 이미지가 포함 된 격자는 항상 이미지의 꼭대기에있는 것처럼 보입니다. 따라서 전체 격자 영역 (아래 "tp-grid"참조)에 함수를 추가하면 갤러리 내부를 클릭 할 수 있고 이미지가 트리거되지만 단일 이미지는 별도의 버튼으로 작동하지 않습니다. /. 누군가 나를위한 힌트를 얻길 바랍니다. 나는 주요 영역으로 아래로 암호를 해독하려고 :

포트폴리오 영역은 갤러리를 포함 :

<div id="pf-content" > 

     <div class="container" style="position:absolute; z-index:10;"> 

      <section class="main"> 

       <div class="wrapper"> 

        <div class="topbar"> 
         <span id="close" class="back">&larr;</span> 
         <h1 style="color:#999">PORTFOLIO</h1><h2 id="name"></h2> 
        </div> 

        <ul id="tp-grid" class="tp-grid"> 

         <!-- Matte Paintings --> 
         <li id="monja" data-pile="MATTE PAINTING">        
           <span class="tp-info"><span >Monjacity</span></span> 
           <img src="images/1/monjacity.jpg" /> 
         </li> 

        </ul> 

       </div> 

      <div id="monja-large" style="display:none;z-index:11000;"> 
     <img src="../clients/VFX_DavidLuongWS/highlife_in_monjacity_v16_1k.jpg" width="1100" height="618" /> 
      </div> 

      </section> 

     </div> 

    </div>  

는 기본적으로 나는 ID로 사업부를 트리거 할 = "몬자 대형"갤러리 이미지를 클릭하여 "monja"로 식별됩니다. 따라서 다음을 사용하려고했습니다 :

 $("#monja").click(function() { 
     $("#monja-large").toggle(selectedEffect, options, contentFade); 
     return false; 
    }); 

사이트의 모든 내 버튼에 이러한 코드 줄을 사용했습니다. 구문은 ok^_^여야합니다. 만약 내가 당신이 웹 사이트에 있다면 귀하의 브라우저를 통해 완전한 html 코드를 볼 수 있다고 착각하지는 마십시오. 나는 여기서 좀 더 깨끗하게 지내고 너무 혼란스럽지 않게하고 싶다. 함수가 트리거되지 않은 것을 볼 수 있습니다. jquery 용 Stapel.js 플러그인의 함수를 호출하는 부분입니다. 확실하지 그 유용 경우 :

 $(function() { 

     var $grid = $('#tp-grid'), 
      $name = $('#name'), 
      $close = $('#close'), 
      $loader = $('<div class="loader"><i></i><i></i><i></i><i></i><i></i><i></i><span>Loading...</span></div>').insertBefore($grid), 
      stapel = $grid.stapel({ 
       onLoad : function() { 
        $loader.remove(); 
       }, 
       onBeforeOpen : function(pileName) { 
        $name.html(pileName); 
       }, 
       onAfterOpen : function(pileName) { 
        $close.show(); 
       } 
      }); 

     $close.on('click', function() { 
      $close.hide(); 
      $name.empty(); 
      stapel.closePile(); 
     }); 

    }); 

긴 짧은 이야기 : 당신은 내가이 별도의 갤러리 이미지에 액세스하고이를 클릭하여 함수를 호출 할 수있는 방법 어떤 생각을 가지고 있습니까? 필자는 또한 tp-grid를 뒤로 밀고 이미지를 앞으로 끌어 와서 버튼처럼 클릭 할 수있게하려고 노력했습니다 ... 성공하지 못했습니다.

처음으로 게시하는 것이므로 내 웹 사이트에서 소스 코드를 볼 수없는 경우 자세한 정보가 필요하면 알려주십시오. 수천 번 감사드립니다!

안부, Dziga

Answer 1

당신은 플러그인을 발사하려고하는 기본 클릭 동작을 방지 할 필요가있다.

$("#monja").click(function(e) { 
    e.preventDefault(); 
    alert('it works'); 
}); 

자세한 내용은 Event Bubbling을 확인하십시오.