Question

我收到此错误＆＃34; TypeError：f.handler.apply不是函数＆＃34;当我将以下脚本应用于我的视图时（此错误来自JQuery 2.1.3库本身）：

$( document ).ready(function() {

$('#crystal-container').hover('.thumbnail',
    function(){
        $(this).find('.caption').slideDown(240); //.fadeIn(250)

    },
    function(){
        $(this).find('.caption').slideUp(240,function(){$ (this).stop( true, true )}); //.fadeOut(205) and stop hover
    }
);
});

这个确切的脚本（没有后期绑定标识符#crystal-container）在另一个视图文件上可以正常工作，我试图在图像上向下滑动一个透明窗口，但是当我尝试在图像上使用它时我和＃ 39; m通过AJAX加载它给了我这个错误。有什么想法吗？

透明窗口确实向下滑动，但是当它应该发生在鼠标悬停在的特定图像上时，它会发生在页面上的所有图像上。一旦窗口向下滑动，我就会收到此错误消息，其余代码将停止运行。

Answer 1

相反，你可以尝试这个作为你的答案：

这是更新的代码。

$( document ).ready(function() {

  $('#crystal-container').on('mouseover', '.thumbnail', function(){
        $(this).find('.caption').slideDown(240); //.fadeIn(250)
  });


  $('#crystal-container').on('mouseout', '.thumbnail', function(){
        $(this).find('.caption').slideUp(240,function(){$ (this).stop( true, true )}); //.fadeOut(205) and stop hover

  });
});

这肯定有用。

Answer 2

那也不起作用，但谈话给了我一个想法。我将悬停功能包装在后期绑定鼠标悬停中，它可以工作。我不确定这是否是一个很好的解决方案，但确实有效。谢谢您的帮助！

$( document ).ready(function() {

$('#crystal-container').on('mouseover', '.thumbnail', function(){
    $('.thumbnail').hover(
    function(){
        $(this).find('.caption').slideDown(240); //.fadeIn(250)

    },
    function(){
        $(this).find('.caption').slideUp(240,function(){$ (this).stop( true, true )}); //.fadeOut(205) and stop hover
    }
);
});
});

Answer 3

以下使用的代表类似于我的想法。然而，它的滑动可能不是你想要的，但你明白了。

＆＃13;

$(function() {
            $('#crystal-container').on('mouseenter', '.thumbnail', function() {
                var $caption = $(this).find('.caption');
                $caption.slideDown(240);
            }).on('mouseout', '.thumbnail', function() {
                var $caption = $(this).find('.caption');
                $caption.slideUp(240,function(){$ (this).stop( true, true )});
            });

            //simulate records being created after the binding
            $('#crystal-container').append($('.thumbnail').eq(0).clone().prop('outerHTML'));
        });

＆＃13;

.thumbnail {
    border: 1px solid #000;
    background-color: #888;
    min-height: 20px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="crystal-container">
  <div class="thumbnail">
    <div class="caption">
      Blah1
    </div>
  </div>
  <div class="thumbnail">
    <div class="caption">
      Blah2
    </div>
  </div>
</div>

＆＃13;

JQuery Slide Down Error with Late Binding Event

3 个答案: