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 为例。