jQueryプラグインGridsterを使用しています。
新しいウィジェットを追加するadd_widgetボタンを作成しました。このウィジェットは、再度削除することもできます。
これはすべて正しく機能しています。ただし、ヘッダーをクリックすると、スライドボックスがトリガーされます。ただし、このスライドボックスは、新しく追加されたウィジェットでは機能せず、最初から存在していたウィジェットでのみ機能します。
ヘルプ!!!!
このフィドルを参照してください:http: //jsfiddle.net/ygAV2/
私は疑う:
アドボックス部分
//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
});