jquery - jQuery 对话框选择不正确

Question

在this Fiddle，当您单击图像时会显示一个 jQuery 对话框。对话应包含特定于图像的文本，例如，律师事务所图像的律师事务所文本，行业图像的行业文本等。

问题是，一旦您点击了这三张图片中的每一张，任何进一步点击任何图片都会返回与您点击的三张图片中最后一张相关的对话框，而不是您刚刚点击的图片的对话框点击。

谁能指出我做错了什么？

HTML

<div id="sf">

    <a href="dialogcontent/lawfirms.html" title="Law firms" id="sfimage">
        <div class="circle hovershadow lawfirms lawfirms-box-shadow">Law firms</div>
    </a> 
    <a href="dialogcontent/industry.html" title="Industry" id="sfimage">
        <div class="circle hovershadow industry industry-box-shadow">Industry</div>
    </a> 
    <a href="dialogcontent/in-house.html" title="In-house legal counsel" id="sfimage">
    <div class="circle hovershadow in-house in-house-box-shadow text">In-house
            legal counsel</div> 
    </a>
</div>

Javascript:

$(document).ready(function () {
var $loading = $('<img src="http://ubuntuone.com/5qQ3i4ctM8HAvRsSIZKgqd" alt="Loading ..." class="loading">'); 
var $dialog = $('<div></div>')

$('#sf a').each(function () {

         $dialog.append($loading.clone());
    var $link = $(this).one('click', function () {
        $dialog.load($link.attr('href') + ' #content')
            .dialog({
            title: $link.attr('title'),
            width: 500,
            height: 300
        });

        $link.click(function (e) {

        //    e.preventDefault();
            $dialog.dialog('open');

            return false;
        });

        return false;
    });
});
});

Answer 1

您正在使用“一个”方法。因此，每个元素最多执行一次点击事件。

因此，如果该元素的处理程序已经执行，那么将显示对话框中最后加载的内容。