0

我有以下 JQuery 模块，它折叠页面上的表单，以便单击按钮将显示它：

(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按钮时未调用附加到的事件的单击处理程序，尽管没有错误并且看起来附加正常。

这可能是什么原因？

4

2 回答 2

0

您是自己编写所有代码还是从其他地方获得的？您确定 on.click 处理程序应该在 jQuery.fn.extend 函数内吗？

还有，是不是全部都包裹在里面了

$(document).ready(function() {
-----
});
于 2013-08-05T18:47:05.107 回答
0

事实证明，表单事物的扩展，以及禁用“扩展”按钮导致 Firefox 在页面刷新时记住禁用状态。

此处的更多信息：Jquery UI 按钮在刷新时被禁用

我通过在每次页面加载时删除按钮上的禁用状态来修复它。

于 2013-08-05T20:20:45.423 回答