为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/