2

在这个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;
    });
});
});
4

1 回答 1

0

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

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

于 2013-03-23T11:18:42.763 回答