2个fancybox链接到不同的盒子 - 冲突

时间:2013-05-03 03:36:36

标签: jquery ruby-on-rails fancybox

我有2个链接链接到Ruby on Rails上的Fancyboxes:

链接1的类是:“why_am_i_here fancybox” link 2的课程是:“feedback_link fancybox”

当我第一次点击链接1时,我需要链接2的fancybox。如果我再次点击,它会将我带到正确的链接。另一个按钮(链接2)正常工作。

不要用各种可能/可能不相关的代码侵入你,告诉我你需要的更多信息,我会提供。

这是呈现的HTML forr why_am_i_here(链接1):

$(function(){
    var search_value;
    $(".why_am_i_here_button, .fancybox").fancybox({
        type : 'iframe',
        autoSize : true,
        afterLoad : function(){
                $(".fancybox-iframe").contents().find(".feedback_link").remove();
                $(".fancybox-iframe").contents().find("#app_header_right").remove();
                $(".fancybox-iframe").contents().find("#feed").remove();
            $(".fancybox-iframe").contents().find("#search_submit").unbind("type"); 
            block_off_default_clicks();
            set_click_listeners();
            $(".fancybox-iframe").contents().find("#search_submit").click(function(e){
                e.preventDefault();
                parent.$.fancybox.close();

            });
        },
        beforeClose : function(){
            search_value = $(".fancybox-iframe").contents().find('#search').val();
        },
        afterClose : function(){
            if (search_value){
                $("#searchbox_holder").html("<%= escape_javascript(render 'restaurants/searchbox') %>");
                $("#search").attr("value", search_value);
                $("#user_edit_wrapper").hide();
                $(".search_form").submit();
            }
        }
    }).eq(0).click().stopPropagation();

});

这是feedback_link(链接2)的呈现HTML:

$(function(){
    $(".feedback_link, .fancybox").fancybox({
        type : 'iframe',
        afterLoad : function(){
            $(".fancybox-iframe").contents().find(".feedback_link").remove();
            $(".fancybox-iframe").contents().find("#feed").remove();
                $(".fancybox-iframe").contents().find("#app_header_right").remove();
            block_off_default_clicks();

            $(".fancybox-iframe").contents().find(".feedback_form").submit(function(e){
                parent.$.fancybox.close();
            });
        }
    }).eq(0).click().stopPropagation();

});

HERE是每个链接的HTML:

链接1:

<div id = "why_am_i_here_container">
<%= link_to "Here\'s how it works", info_path(:welcome => params[:welcome]), :remote => true, :class => "why_am_i_here_button fancybox rounded-corner", :id => "why_am_i_here" %></div>

链接2:

<li class = "app_header_item"><%= link_to 'Feedback (please)', new_feedback_path, :remote => true, :class => "feedback_link fancybox", :id => "feedback_link" %></li>

1 个答案:

答案 0 :(得分:0)

很难跟踪你来回移动代码的行为,但我会做的是:

链接1:

<div id = "why_am_i_here_container">
<%= link_to "Here\'s how it works", info_path(:welcome => params[:welcome]), :remote => true, :class => "why_am_i_here_button rounded-corner", :id => "why_am_i_here" %>
</div>

链接2

<li class = "app_header_item"><%= link_to 'Feedback (please)', new_feedback_path, :remote => true, :class => "feedback_link", :id => "feedback_link" %></li>

通知我从两个链接中删除了班级fancybox

然后是jQuery代码:

$(function () {
    var search_value;
    $(".why_am_i_here_button").fancybox({
        // options for why_am_i_here_button
        type: "iframe" // etc
    });
    $(".feedback_link").fancybox({
        // options for feedback_link
        type: "iframe" // etc
    });
}); // ready

两个inits都在同一个$(function(){})就绪方法中。上面的代码应该有效。

我不确定您使用的是.eq(0).click().stopPropagation();,但暂时将其删除并测试您的链接。