jquery - 使用 jquery 在 "lightbox"div 中加载的表单不会使用 Firefox 提交，但可以在 Safari 中使用

Question

好的，我创建了一个使用 Jquery 加载表单的灯箱。在 Safari、Chrome 中一切正常。在 FireFOx 中，表单不会提交。如果我使用 event.preventDefault();或者如果我使用 return false;当你在 FF 中点击提交按钮时，什么也没有发生，但正如我在 Safari 和 Chrome 中所说的那样，一切都很好。这是 Jquery 代码:

//LIGHTBOX FUNCTION

$(document).ready(function(){

 $('.litebox').click(function(e){

    e.preventDefault();

    var link = $(this).attr('href');

    if($('#lightbox_bg').length == 0){

        $('body').append('<div id="loader"><img src="images/loader2.gif" /></div>');
        $('body').append('<div id="lightbox_bg"></div>');
        $('body').append('<div id="lightbox_content"></div>'); 

        $('#loader').css({"display":"block"});
        $('#lightbox_bg').fadeIn(300);
        $('#lightbox_content').load(link , function(){

            $(this).fadeIn(300);
            $('#loader').css({"display":"none"}).remove();
        });

        return false;
    } 
});


 $("#close-panel").live('click', function(e){ 

    e.preventDefault();

    $('#lightbox_content').fadeOut(300 , function(){
         $(this).remove();
    });

   $('#lightbox_bg').fadeOut(300, function(){
         $(this).remove();
    });



       return false;

}); 
});

想法？ Firebug 报告没有错误。如果我摆脱 eventDefault 并返回 false，表单将在其自己的页面中打开，而不是在灯箱 DIV 中打开，然后提交按钮将提交表单。我缺少什么。我是新手，所以请友善。

谢谢

编辑

这是表格:

    <div class="grid_1_head"> Create Project <span class="right_shots"><a id="close-panel" href="#"class="create_new_shot">Close this window</a></span></div>
    <div class="hover_1_body"> 

        <p> Enter new project information below to create a new project </p>

        <div class="project_form_text">
        <div class="hover_1_error">           
    <div class="message_error"></div>
    <div class="project_create_success"></div>  

        </div>
            <div class="form_left">     
            <form id="create_project" action="widgets/create_project_process.php" method="post">  

<p>
         <label for="project_name">Project Name:</label>
         <input id="project_name" name="project_name" type="text" placeholder="required" class="field_boarder" value="" size="35px" maxlength="55px"  required/></br>

         <label for="project_description">Project Description:</label>
         <textarea id="project_description" name="project_description" rows="6" cols="36" placeholder="required" class="field_boarder"  maxlength="255px"  required></textarea></br>


         <label for="project_budget">Project Budget:</label>
            <input id="project_budget" name="project_budget" type="text" pattern="^\d+(?:,\d{3})*\.\d{2}$" placeholder="(optional, only if you want to track a budget)" class="field_boarder" value="" size="35px"  maxlength="55" /></br>

</div>



        <div class="login_button_container">
       <input name="create_project" type="submit" class="login_button" value="Create Project"/>



        </div>

    </form>

      </div> 

    </div>

Answer 1

我的猜测是它与 event.preventDefault 有关，但在没有看到整个页面的情况下我无法判断。我假设您的 .litebox div 包含表单，并且其中的任何点击都无法正常运行。如果这是问题所在，您可以通过使用 PreventDefault 的开/关功能来解决

换行

 $('.litebox').click(function(e){

到

 function openLightbox(e){

不要忘记更改结束语 )};只是}

然后，像这样设置:

$('.litebox').on('click', openLightbox);

并在 openLightbox 函数的末尾添加以下行

$(this).off('click', openLightbox);

如果您有关闭灯箱的功能，请输入该行

$(this).on('click', openLightbox);

这将重新激活单击 div .lightbox