2013-08-05 51 views
0

我有以下JQuery的模块,折叠页面上的形式,使点击一个按钮,就会发现它:JQuery的click事件不工作的Firefox

(function (jQuery) { 
    "use strict"; 

    //Attach this new method to jQuery 
    jQuery.fn.extend({ 

    module_content_form_expander: function (options) { 

     // Iterate over the current set of matched elements 
     return this.each(function() { 

     var form_expander_thing = jQuery(this); 
     var strButtonInit = options.initial_button_text; 
     var strButtonActive = options.active_button_text; 

     var module_thing = form_expander_thing.find('.module-content'); 
     var content = form_expander_thing.find('.visible-content'); 
     var button = form_expander_thing.find('.trigger'); 
     var cancel = form_expander_thing.find('.cancel-action'); 

     module_thing.hide(); 
     content.css('opacity', 0); 
     button.css('margin-top', '0.7em'); 
     button.attr('value', strButtonInit); 

     button.on('click', function (e) { 
      if (!content.is(':visible')) { 
      e.preventDefault(); 
      jQuery(this).hide(); 
      jQuery(this).removeClass('action-primary'); 
      jQuery(this).addClass('action-secondary'); 
      jQuery(this).attr('disabled', 'disabled'); 

      module_thing.slideToggle(300, function() { 
       content.animate({'opacity': 1}); 
       button.attr('value', strButtonActive); 
       button.css('margin-top', '0'); 
       button.fadeIn(); 
       cancel.css('display', 'block'); 
      }); 
      } 
     }); 

     cancel.on("click", function (ev) { 
      ev.preventDefault(); 
      jQuery(this).hide(); 
      button.removeClass('action-secondary'); 
      button.addClass('action-primary'); 
      content.css('opacity', 0); 
      module_thing.slideToggle(300, function() { 
      button.css('margin-top', '0.7em'); 
      button.attr('value', strButtonInit); 
      button.removeAttr('disabled'); 
      jQuery('.required').val(''); // Need non-required elements cleared too, perhaps? 
      var $newNoteTagInput = $('#tag_list'); 
      if ($newNoteTagInput.length) { 
       $newNoteTagInput.tokenInput('clear'); 
       $newNoteTagInput.blur(); // Hides dropdown. 
      } 
      }); 
     }); 
     }); 
    } 
    }); 

})(jQuery); 

在页面加载,它的触发像这样:

var app = { 
    initApp : function() { 
     jQuery('form#new-placement-form.expandable-module').module_content_form_expander({'initial_button_text': 'Add a new placement', 'active_button_text': 'Add' }); 
    } 
} 

jQuery(function() { 
    app.initApp(); 
} 

它工作正常,它也可以在Chrome中刷新页面后工作。但是,在Firefox上,它只有在第一次加载页面时才起作用。刷新后,它什么都不做。去一个不同的页面,然后通过链接返回使其再次工作。

Firebug显示单击按钮时未连接到button事件的点击处理程序,虽然没有错误,但看起来好像连接正常。

这可能是什么原因造成的?

回答

0

你自己写了所有的代码,还是从别的地方得到它?你确定on.click处理程序应该在jQuery.fn.extend函数中吗?

而且,一切都包裹在里面

$(document).ready(function() { 
----- 
}); 
+0

是的,我写了,但我不太清楚,如果我错过了一些重要的东西。我已更新以显示在页面加载时如何调用它。我还可以在哪里放置点击处理程序(这是重复使用多个窗体)? –

0

原来,形式的东西扩张,与它的禁用“扩展”按钮是造成火狐记得页面刷新禁用状态。

此处了解详情:Jquery UI button gets disabled on refresh

我通过每一次按钮,清除处于禁用状态的页面加载固定它。