Question

我有以下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的事件的点击处理程序在单击按钮时没有被调用，尽管没有错误，看起来它附加了OK。

这可能是什么原因？

Answer 1

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

此外，所有内容都包含在

中

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

Answer 2

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

此处有更多信息：Jquery UI button gets disabled on refresh

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

在Firefox上刷新页面后，JQuery点击事件无法正常工作

2 个答案: