需要修改这个jquery弹出菜单脚本与ajax工作
need to modify this jquery pop menu script to work with ajax
我使用的脚本来自:http://pop.seaofclouds.com/
问题是,如果您多次调用脚本,它会在调用脚本的次数中导致弹出框中的弹出框的级联效应。
我试图找出如何防止它执行时,弹出窗口已经设置。脚本如下:
//
// pop! for jQuery
// v0.2 requires jQuery v1.2 or later
//
// Licensed under the MIT:
// http://www.opensource.org/licenses/mit-license.php
//
// Copyright 2007,2008 SEAOFCLOUDS [http://seaofclouds.com]
//
(function($) {
$.pop = function(options){
// inject html wrapper
function initpops (){
$(".pop").each(function() {
var pop_classes = $(this).attr("class");
if ( $(this).find('.pop_menu').length) {
// do nothing
} else {
$(this).addClass("pop_menu");
$(this).wrap("<div class='"+pop_classes+"'></div>");
$(".pop_menu").attr("class", "pop_menu");
$(this).before(" '
<div class='pop_toggle'></div> '
");
}
});
}
initpops();
// assign reverse z-indexes to each pop
var totalpops = $(".pop").length + 100;
$(".pop").each(function(i) {
var popzindex = totalpops - i;
$(this).css({ zIndex: popzindex });
});
// close pops if user clicks outside of pop
activePop = null;
function closeInactivePop() {
$(".pop").each(function (i) {
if ($(this).hasClass('active') && i!=activePop) {
$(this).removeClass('active');
}
});
return false;
}
$(".pop").mouseover(function() { activePop = $(".pop").index(this); });
$(".pop").mouseout(function() { activePop = null; });
$("body").on("click", ".pop", function(){
closeInactivePop();
});
// toggle that pop
$("body").on("click", ".pop_toggle", function(){
$(this).parent(".pop").toggleClass("active");
});
}
})(jQuery);
现在,当我加载这个脚本上的ajax调用新的弹出菜单工作,但旧的不响应onclick事件。
你不应该乱动插件。它就像它应该的那样工作。最好向我们展示如何在已有的元素上调用该方法。
我也不喜欢这个插件。最好使用来自JqueryUI的东西你可以用简单得多的方法做这件事。
[编辑]我尝试了你的第一个代码(插件),它对我来说工作正确。
[编辑]好的。我明白了。调用$.pop();很多次了。你不应该!调用.pop美元();将下拉菜单固定到所有class="pop"的元素上。这就是为什么你有这么有趣的堆栈的原因。只需使用$.pop();一次。插件不提供连接页面上动态创建的新元素的能力。
从ajax调用中删除pop,并在成功时调用:
$(".pop").each(function() {
var pop_classes = $(this).attr("class");
if ( $(this).find('.pop_menu').length) {
// do nothing
} else {
$(this).addClass("pop_menu");
$(this).wrap("<div class='"+pop_classes+"'></div>");
$(".pop_menu").attr("class", "pop_menu");
$(this).before(" '
<div class='pop_toggle'></div> '
");
}
});
// assign reverse z-indexes to each pop
var totalpops = $(".pop").length + 100;
$(".pop").each(function(i) {
var popzindex = totalpops - i;
$(this).css({ zIndex: popzindex });
});
// close pops if user clicks outside of pop
activePop = null;
function closeInactivePop() {
$(".pop").each(function (i) {
if ($(this).hasClass('active') && i!=activePop) {
$(this).removeClass('active');
}
});
return false;
}
$(".pop").mouseover(function() { activePop = $(".pop").index(this); });
$(".pop").mouseout(function() { activePop = null; });
相关文章:
- 使用java脚本更改onClick事件中菜单选项卡的颜色
- 何时可以;我的用户脚本在Javascript中触发右键单击(上下文菜单)
- 使用Java脚本将值传递到模式弹出菜单
- 从下拉菜单将值传递给 gsp 中的脚本
- 移动菜单需要 Jquery 2.0.1,但其他站点脚本需要旧版本
- 子菜单的Jquery脚本,我该如何修复它
- 如何修复子菜单的此 jquery 脚本
- 修改此滚动导航菜单脚本
- 正则表达式映射在 Firefox 上下文菜单内容脚本中
- 下拉菜单 java 脚本
- 带有java脚本的下拉菜单,根据第一个下拉菜单更改值
- 在 Illustrator cs5.1 的“脚本”菜单下放置脚本的位置
- css菜单或脚本don'I don’我不干ie
- AJAX-如何在弹出菜单中运行脚本
- Mailto或超链接不会;由于子菜单脚本,无法处理页脚菜单
- 如何在Kendo UI中将java脚本函数设置为菜单栏项
- 谷歌脚本获取谷歌电子表格菜单内容
- 在内容脚本得到响应之前,禁止启动上下文菜单
- 我试图添加下面的脚本来列出一些产品,而添加这个脚本菜单栏是不起作用的.为什么?
- Jquery滚动脚本-菜单坐在顶部的部分,而不是里面