jQuery $（document）.bind仅在单击特定div中的链接时适用

Question

我正在创建一个页面，其中多个链接将打开一个面板 （lightbox样式div）。

对于#artworks-col artworks #artworks-col div中页面上的链接，我希望将面框强制打开为800px宽度； 对于其他所有人，我只希望它使用其默认计算。

将其放在页面上会强制所有链接将其打开为800px宽：

<script type="text/javascript">
  $(document).bind('beforeReveal.facebox', function() { $('#facebox .content').css('width', '800'); });
</script>

但是在多次尝试使其仅适用于#artworks-col链接之后，我仍然只能使其适用于全部或全不适用。 有没有一种方法可以过滤此绑定事件以使其特定于该链接子集？

我想到的唯一方法是使用$("a#artworks-col").click(var flag = true);设置一个临时标志$("a#artworks-col").click(var flag = true); 并在整个文档范围的bind事件中检查该标志（并在运行width修改后在bind事件中将其清除），但这看起来确实很乱，并且肯定会有一种更好的方法。

这是此页面的RoR视图（请注意，脚本将在工作后将其移动到一个外部文件中，现在将其全部放在一个位置更容易）：

<div id="admin_logo">
    <%= image_tag("logo_admin.png", alt: "Administration") %>
</div>
<div id="artworks-col"><%= render partial: "artworks_list" %></div>
<div id="artists-col"><%= render partial: "artists_list" %></div>
<div id="locations-col"><%= render partial: "locations_list" %></div>
<div id="insurers-col"><%= render partial: "insurers_list" %></div>
<div id="users-col"><%= render partial: "users_list" %></div>

<div id="show-object" style="display:none;"></div>

<script type="text/javascript">
  $(document).bind('beforeReveal.facebox', function() { $('#facebox .content').css('width', '800'); });
</script>

上面的erb代码中的render part只是为数据库中该类型的所有对象添加<a href>的列表。 这些链接是我要将此功能应用到的那些链接。

编辑

由于无法通过jQuery实现此功能，因此我将使用CSS来解决此问题，以定义单击这些特定链接时要显示的宽度为800px的div。 我更喜欢通过jQuery来执行此操作，因为它会在需要更动态方法的其他情况下使用，但是现在必须这样做。

Answer 1

编辑：工作答案

我在此处上传了示例的工作版本： http : //fluidev.com/stack/fbox/test.html

这是您绑定单独的单击事件并为每个事件实现不同宽度的方法。 通过使用回调函数（在初始调用函数完成后运行的函数），我们可以实现不同设置宽度的错觉，即使它发生在面板加载后。 最酷的是，您甚至可以根据需要使用动画和东西来更改宽度！

$(document).ready(function() {
        $("#artworks-col").bind("click", function() {
            $.facebox({ div: '#artworks-col' }, function() { $('#facebox .content').css('width', '800px'); } ); 
        });
        $("#artists-col").bind("click", function() {
            $.facebox({ div: '#artists-col' }, function() { $('#facebox .content').css('width', '200px'); } ); 
        });
    });

Answer 2

在没有看到更多标记的情况下，我只能假设您的意思是这样的：

$(document).bind('beforeReveal.facebox', function () {
    $('#facebox .content').css('width', 'auto');
});
$('div#artworks-col a').click(function (e) {
    $('#facebox .content').css('width', '800px');
});
//Try doing this instead, but I suspect links outside $('div#artworks-col a')
//will also set the width to 800px...
$('#facebox .content').bind('beforeReveal.facebox', function () {
    $('#facebox .content').css('width', '800px');
});

Answer 3

试试看。.使用.on（），它在jQuery 1.7及更高版本中可用。

$(document).on('beforeReveal.facebox','#artworks-col', function() { 

              $('#facebox .content').css('width', '800'); 
 });

您的页面中似乎有多个具有相同ID的元素。尝试改用类。