Question

我不明白为什么会收到以下错误：无法调用方法＆＃39; scrollTop＆＃39;未定义的

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

我唱的是jQuery 1.11，bootstrap 3.1.1。

关于代码（HAML）

显示模态的按钮：

.forgot_password.pull-right = link_to t('.forgot_password'), '#forgot_password', data: { 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"} &times;
        %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或未定义，它会破坏代码。但我正在寻找修复/解决方法，因为它违反了我的测试规范！（红宝石与水豚）

我按照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类，以避免每次重复相同的东西！遗憾！

bootstrap modal：无法调用未定义的方法'scrollTop'

1 个答案: