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