爲jQuery插件工作？

Question

我正在使用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 
}); 

Answer 1

採用.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/