jquery : 함수가 여러 번 트리거 됨

Question

특정 div (#block_profile)에서 qtip2 툴팁을 실행할 때 아래 함수가 여러 번 트리거되는 문제가 있습니다. 그래서 4 번째 #block_profile을 클릭하면이 함수가 4 번 호출됩니다. 어떻게 클릭 한 정확한 div에 대해서만 실행되도록 할 수 있습니까?

// Create the tooltips only on document load 
$(document).ready(function() { 
    // Make sure to only match links to wikipedia with a rel tag 
    $('div.block_profile[rel]').each(function() { 


     // We make use of the .each() loop to gain access to each element via the "this" keyword... 
     $(this).qtip(
      { 
       content:{ 
        // Set the text to an image HTML string with the correct src URL to the loading image you want to use 
        text:'<img src="/assets/ux/modal/loading.gif" alt="Loading..." />', 
        ajax:{ 
         url:'/profiles/get_info/' + $(this).attr('rel') // Use the rel attribute of each element for the url to load 
        }, 
        title:{ 
         button:false 
        } 
       }, 
       position:{ 
        my:'top left', 
        target: 'mouse', 
        viewport:$(window), // Keep the tooltip on-screen at all times 
        adjust:{ 
         x:10, y:10 
        } 
       }, 
       hide:{ 
        fixed:false // Helps to prevent the tooltip from hiding ocassionally when tracking! 
       }, 
       style:{ 
        classes:'container ui-tooltip ui-tooltip-tip' 
       } 
      }) 
    }) 

     // Make sure it doesn't follow the link when we click it 
     .click(function (event) { 
      event.preventDefault(); 
     }); 
}); 

html로 :

<div id ="block_profile" class ="block_profile rel="1">div 1</div> 
<div id ="block_profile" class ="block_profile rel="2">div 2</div> 
<div id ="block_profile" class ="block_profile rel="3">div 3</div> 
<div id ="block_profile" class ="block_profile rel="4">div 4</div> 
<div id ="block_profile" class ="block_profile rel="5">div 5</div> 

Answer 1

는 다음과 같은 코드를 사용한다는 :

// Create the tooltips only on document load 
$(document).ready(function() { 
    // Make sure to only match links to wikipedia with a rel tag 
    $('div.block_profile[rel]') 
     .qtip({ 
      ... 
     }) 
     .click(function (event) { 
      event.preventDefault(); 
     }); 
}); 

each 호출이 필요하지 않습니다. 예를 들어 this demo을 확인하십시오.