1

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

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

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

我真的很感谢这里的帮助，谢谢！

<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();
});
4

3 回答 3

3

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

var images = $('#images');

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

images.append(contents);

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

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

于 2012-05-08T12:30:08.327 回答
2

采用.on()

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

不能使用 bind 的原因是因为您动态附加脚本。因此，绑定被移除。

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

编辑 感谢@clive 指出我的错误。这是更新的小提琴

于 2012-05-08T12:30:35.470 回答
0

用委托事件试试这个：

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

演示

于 2012-05-08T12:31:43.647 回答