javascript - Bootstrap 模式 : Cannot call method 'scrollTop' of undefined

Question

我不明白为什么会出现以下错误: 无法调用未定义的方法“scrollTop”

当我点击显示模式的链接时。

我正在使用 jQuery 1.11，bootstrap 3.1.1。

关于代码(HAML)

显示模态的按钮:

.forgot_password.pull-right = link_to t('.forgot_password'), '#forgot_password', 数据:{ target: "#forgot_password", toggle: "modal"}, tabindex: 5

模态:

#forgot_password.modal{tabindex: -1, role: 'dialog', "aria-labelledby" => t('.title'), "aria-hidden" => true}
  .modal-dialog
    .modal-content
      .modal-header
        %button.close{"aria-hidden" => "true", "data-dismiss" => "modal", :type => "button"} ×
        %h4= t('.title')
      .modal-body
        .form_wrapper
          .innertxt= t('.explanation')
          .forgot_password_form
            = form_for :forgot_password, url: forgot_password_path do |f|
              = text_field_tag :email, '', placeholder: t('email'), size: 50, autofocus: true
              = submit_tag t('send'), :class => 'btn'

发生问题的 Bootstrap :(方法Modal.prototype.show)

this.backdrop(function () {
      var transition = $.support.transition && that.$element.hasClass('fade')

      if (!that.$element.parent().length) {
        that.$element.appendTo(document.body) // don't move modals dom position
      }

      that.$element
        .show()
        .scrollTop(0)
...

显示错误:

TypeError: 'undefined' is not an object (evaluating 'that.$element
               .show()
               .scrollTop')

我猜 that.element 是 null 或 undefined 并且它破坏了代码。但我正在寻找修复/解决方法，因为它破坏了我的测试规范! ( ruby 与 capybara )

我遵循了 http://getbootstrap.com/javascript/#modals 上的示例到目前为止，我看不出他们的代码和我的代码有什么区别。我尝试使用 javascript 而不是 html 来打开模式，但它完全一样。

有什么想法吗？

编辑:Ruby/capybara 代码

click_link 'Glemt adgangskode?'# Forgotten password?
  sleep 3
  within_frame('form_login') do
    fill_in 'email', with: 'jens@example.com'
    click_button 'Send'
  end

Edit2:顺便说一下，一切正常，模态弹出窗口正确，我只是遇到了一个 javascript 错误，实际上并不影响使用。但我想了解并解决这个问题。

Answer 1

好吧，那是我的错误!

实际上，几周前我重写了 jQuery.show() 方法并忘记了 ... return 语句。这就是为什么 scrollTop 实际上是基于 undefined 元素的原因!

$(function(){
  /**
   * Override hide function.
   */
  // Store a reference to the original remove method.
  var originalShowMethod = $.fn.show;

  $.fn.show = function(){
    var self = $(this);

    // Remove CSS classes that hide the element.
    self.removeClass('hidden hide invisible');

    // Apply the original method.
    return originalShowMethod.apply(this, arguments);
  }
});

现在效果更好了!覆盖允许我在调用 show() 函数时自动删除 CSS 类，以避免每次都重复相同的内容! 对不起!