2012-07-08 97 views
0

我有下面的函數執行某些div(#block_profile)上的qtip2工具提示問題是它被觸發多次。所以如果我點擊第四個#block_profile,它會調用這個函數4次。我怎樣才能讓它只執行已被點擊的確切div?jquery:函數被觸發多次

// 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> 
+0

html中的元素ID必須是** unique **。修復這些。 – nbrooks 2012-07-08 09:40:58

+0

你注意到在你的'class'中你錯過了一個雙引號嗎? – DPlusV 2012-07-08 09:41:14

+0

除了格式不正確的html,你的代碼[對我來說工作正常](http://jsfiddle.net/ult_combo/dcnSs/)。 「點擊」和「功能」多次觸發你的意思是什麼?除了'event.preventDefault()'之外,你沒有任何點擊功能。我相信懸停的qtip工作正常嗎? – 2012-07-08 09:52:17

回答

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

+0

是的,但這是行不通的。也許它的其他代碼干擾我在我的應用程序中有很多查詢功能和插件。我認爲我的代碼很糟糕,但我必須驗證這是確實的。 thx – Rubytastic 2012-07-08 11:43:57

+0

如果這不起作用,其他的東西一定是錯的。每個電話都不應該在那裏。我建議你看看其他的提示清理你的HTML的意見。 – 2012-07-08 11:51:59

+0

Thx我打算清理它的確不是最好的html你的代碼是正確的,應該工作確實是它的失敗在我的部分在HTML – Rubytastic 2012-07-13 09:06:11