Question

我正在开发一个可以并排呈现图像的应用程序。当悬停图像时，显示隐藏的类，显示图像的信息。

我还有一个排序功能，以便人们可以按点（最高的，最低的）而不是默认的排序（日期）对图像进行排序。除了一件事之外，悬停和排序都可以正常工作。

当图像按点排序并再次渲染时，悬停图像不起作用。我查看了生成的代码，它看起来一样，但无论它不起作用。

我真的很感谢som的帮助，谢谢！

<div id="images">
    <div class="image">
        <div class="post">
            // other code here
            <div class="postDesc">
                // other code here
                <p class="postDescContent">Points: 10</p>
            </div
        </div>
    </div>
    <div class="image">
        <div class="post">
            // other code here
            <div class="postDesc">
                // other code here
                <p class="postDescContent">Points: 20</p>
            </div
        </div>
    </div>
    // and so one...
</div>

排序功能：

sortByPoints: function() {
    var contents = $('div#images div[class^="image"]');

    contents.sort(function(a, b) {

        var p1= parseInt($('p.postDescContent', $(a)).text().replace('Points:','').trim()),
            p2 = parseInt($('p.postDescContent', $(b)).text().replace('Points:','').trim());
           return p1 < p2;

    });

    var images = $('#images');

    images.empty();
    images.append(contents);
}

悬停功能：

$('.image').hover(function () {
    $(this).find('.postDesc').toggle();
});

Answer 1

.empty()方法清除所有元素数据。你根本不需要清空它。只需执行.append()。

var images = $('#images');

//images.empty();  // remove this

images.append(contents);

这应该足以显示重新排序的元素而不会丢失任何处理程序数据。

现场演示： http://jsfiddle.net/mgF3L/

Answer 2

使用.on()

$('#images').on('hover', 'div.image', function() {
    $(this).find('.postDesc').css('color','#000');
});

您无法使用bind的原因是您动态附加脚本。因此，绑定被删除。

.on()是.live()的替代品，已在jquery 1.7中弃用

修改感谢@clive指出我的错误。这是更新的fiddle

Answer 3

尝试使用委托事件：

$('#images').on('hover', '.image',function () {
    $(this).find('.postDesc').toggle();
});

Demo

排序div后，悬停事件停止工作

3 个答案: