重新绑定hoverIntent jQuery插件

发布于 2024-11-17 11:29:05 字数 1893 浏览 4 评论 0原文

我使用Drupal Views、ajax 和hoverIntent 插件的组合来显示内容。问题是,在 ajax 请求之后,“hoverIntent”事件不再绑定到我的选择器(在本例中为视图的每一行)。有人有解决办法吗?

插件未压缩的hoverIntent js链接

hoverIntent 主页

我的代码如下

——hoverIntent:这会展开一行,如果您的光标位于其上方,同时折叠所有其他行。

$('.view-latest-new .views-field-field-story-lead-image-fid').addClass('expand');
var config = {
    over: function() {
         var expand = $(this).find(".expand");
         if(expand.css("display") == "none")
         {
            $(".expand").slideUp("fast");
            $(this).find(".expand").slideDown("fast");
         }
    }, 
    out: function() {
    }
};
$('.view-home .views-row').hoverIntent(config);

编辑:阿贾克斯:

    var container = $('#content-inner');

    $('#block-menu-secondary-links a').bind('click', function(){
        var trigger = $(this);
        var arg = trigger.attr('title');

        doAjax(arg,container);
        return false;
    });

    function doAjax(arg,container){
        $.ajax({
            url: 'views/ajax?view_name=home&view_display_id=page_1&view_args'+arg,
            timeout:5000,
            success: function(data){
                var result = Drupal.parseJson(data);
                updateContainer(result.display);
            },
        });
    };

    function updateContainer(content){
        container.html(content);
        $('.view-latest-new .views-field-field-story-lead-image-fid').addClass('expand');
        $('.view-latest-new .views-row').hoverIntent(config);
    }

谢谢!

编辑2:我找到了解决方案;通过将 $('.view-home .views-row').hoverIntent(config); 添加到 updateContainer 函数中。我不确定这是否是最好的方法。但它有效。

I am using a combination of Drupal Views, ajax and the hoverIntent plug-in to display content. Problem is, after an ajax request the 'hoverIntent' event is no longer bound to the my selector (in this case each row of the view). Does anyone have a solution to this?

Link to plug-in uncompressed hoverIntent js

hoverIntent home page

My code below--

hoverIntent: This expands a row if you're cursor is over it and at the same time collapses all other rows.

$('.view-latest-new .views-field-field-story-lead-image-fid').addClass('expand');
var config = {
    over: function() {
         var expand = $(this).find(".expand");
         if(expand.css("display") == "none")
         {
            $(".expand").slideUp("fast");
            $(this).find(".expand").slideDown("fast");
         }
    }, 
    out: function() {
    }
};
$('.view-home .views-row').hoverIntent(config);

EDIT: Ajax:

    var container = $('#content-inner');

    $('#block-menu-secondary-links a').bind('click', function(){
        var trigger = $(this);
        var arg = trigger.attr('title');

        doAjax(arg,container);
        return false;
    });

    function doAjax(arg,container){
        $.ajax({
            url: 'views/ajax?view_name=home&view_display_id=page_1&view_args'+arg,
            timeout:5000,
            success: function(data){
                var result = Drupal.parseJson(data);
                updateContainer(result.display);
            },
        });
    };

    function updateContainer(content){
        container.html(content);
        $('.view-latest-new .views-field-field-story-lead-image-fid').addClass('expand');
        $('.view-latest-new .views-row').hoverIntent(config);
    }

Thanks!

EDIT 2: I've found a solution; by adding $('.view-home .views-row').hoverIntent(config); into the updateContainer function. I'm not sure if this is the best way to go about it though. But it works.

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

奢欲 2024-11-24 11:29:05

解决方案:

我已将“hoverIntent”事件移至其自己的函数中。然后我在文档准备好以及 ajax 请求完成后调用它。

    function hoverInit() {
        $('.view-latest-new .views-field-field-story-lead-image-fid').addClass('expand').parent().hoverIntent(config);
    }

    hoverInit();

    function updateContainer(content){
        container.html(content);
        hoverInit();
    }

Solution:

I have moved the 'hoverIntent' event into it's own function. Which then I have called when the document is ready and also after the ajax request has completed.

    function hoverInit() {
        $('.view-latest-new .views-field-field-story-lead-image-fid').addClass('expand').parent().hoverIntent(config);
    }

    hoverInit();

    function updateContainer(content){
        container.html(content);
        hoverInit();
    }
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文