jQuery: function gets triggered multiple times

Question

I have below function which executes the qtip2 tooltip on certain divs ( #block_profile ) the problem is that it gets triggered multiple times. So If I click a 4th #block_profile it calls this function 4 times. How Can I make it only execute for the exact div that has been clicked?

// 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();
        });
});

the 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

You should use the following code:

// 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();
        });
});

The each call isn't necessary. Check out this demo for example.