使这个用于jQuery-plugin的小部件工作
Make this widget for jQuery-plugin work?
我使用的是jQuery插件Gridster
我已经做了一个add_widget按钮来添加一个新的小部件。这个小部件也可以再次删除。
这些都工作正常。但是当你点击页眉时,它会触发一个滑动框。但是这个滑动框不适用于新添加的小部件,只适用于从一开始就存在的小部件。
帮助! !
看这个小提琴:http://jsfiddle.net/ygAV2/
我怀疑:
addbox部分//add box
$('.addbox').on("click", function() {
gridster.add_widget('<li data-row="1" data-col="1" data-sizex="2" data-sizey="1"><div class="box"><div class="menu"><header class="box_header"><h1>HEADER 5</h1></header><div class="deleteme"><a href="JavaScript:void(0);">delete me ;(</a></div></div></li>', 2, 1)
});
和滑动盒部分:
// widget sliding box
$("h1").on("click", function(){
if(!$(this).parent().hasClass('header-down')){
$(this).parent().stop().animate({height:'100px'},{queue:false, duration:600, easing: 'linear'}).addClass('header-down');
} else{
$(this).parent().stop().animate({height:'30px'},{queue:false, duration:600, easing: 'linear'}).removeClass('header-down');
}
});
$(document).click(function() {
if($(".box_header").hasClass('header-down')){
$(".box_header").stop().animate({height:'30px'},{queue:false, duration:600, easing: 'linear'}).removeClass('header-down');
}
});
$(".box_header").click(function(e) {
e.stopPropagation(); // This is the preferred method.
// This should not be used unless you do not want
// any click events registering inside the div
});
不推荐使用.live()
。http://api.jquery.com/live/
因此使用正确的方法,.on(event, selector, handler)
对所有click
事件。
你会得到你想要的结果。
下面是一个代码片段
$(document).on("click", 'h1', function() {
if (!$(this).parent().hasClass('header-down')) {
$(this).parent().stop().animate({
height: '100px'
}, {
queue: false,
duration: 600,
easing: 'linear'
}).addClass('header-down');
} else {
$(this).parent().stop().animate({
height: '30px'
}, {
queue: false,
duration: 600,
easing: 'linear'
}).removeClass('header-down');
}
});
和
//remove box
$(document).on('click', ".deleteme", function () {
$(this).parents().eq(2).addClass("activ");
gridster.remove_widget($('.activ'));
$(this).parents().eq(2).removeClass("activ");
});
和这里
$(document).on("click", ".box_header", function (e) {
e.stopPropagation(); // This is the preferred method.
// This should not be used unless you do not want
// any click events registering inside the div
});
我已经更新了你的jsfiddle: http://jsfiddle.net/ygAV2/2/
相关文章:
- 解决小问题(工作不顺利)
- CKEditor:以小部件作为第一个元素,选择所有在Chrome中不工作的
- jQuery - 数字格式的小片段无法按预期工作
- 引导 - 链接停止以小分辨率工作
- 给朋友留下深刻印象的小代码是 int 工作
- 角度最小和最大时间不工作
- 如何使谷歌免费小部件与https一起工作
- 为什么获胜'我的KML文件(3MB)是否显示在谷歌地图上?但对于小的kml文件(如250kb)工作良好
- Highmaps最小/最大颜色未按预期工作
- Twitter小部件在一个未托管的网站上从工作变成了不工作
- Javascript小部件无法在Sharepoint web部件中工作
- 使HTML_PARSER在小部件DataTable中工作
- 小时数是't正在秒表上工作
- 我如何添加一个在不同域工作的网络小部件的facebook登录名
- 我有一个JQuery工作,但小越野车
- 在开始一个将循环自身的函数之前延迟6秒,小,不工作,为什么
- Javascript中具有最小值和最大值的随机生成器不工作
- jQuery UI autocomplete $.小部件不工作
- JavaScript到Java小程序-工作
- 使这个用于jQuery-plugin的小部件工作