1

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
});
4

1 に答える 1

0

の使用.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/

于 2013-03-04T13:57:16.673 に答える