重新绑定hoverIntent jQuery插件
我使用Drupal Views、ajax 和hoverIntent 插件的组合来显示内容。问题是,在 ajax 请求之后,“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
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 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(1)
解决方案:
我已将“hoverIntent”事件移至其自己的函数中。然后我在文档准备好以及 ajax 请求完成后调用它。
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.