Javascript 让jQuery插件的小部件工作吗？

我正在使用jQuery插件Gridster

我制作了一个添加小部件按钮，它添加了一个新的小部件。此小部件也可以再次删除

所有这些都正常工作。但是当你点击标题时，它会触发一个滑动框。但是这个滑动框不适用于新添加的小部件，只适用于从一开始就存在的小部件

救命啊

看这把小提琴：

我怀疑：

地址盒部件

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

});

不推荐使用

.live（）

因此，使用正确的方法，

。在（事件、选择器、处理程序）

上单击所有

事件

你会达到你想要的结果

下面是一段代码片段

$(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
});

我已经更新了你的JSFIDLE:
这太棒了！。。。非常感谢你！我花了两天的时间来解决这个问题。没问题，有时候另一双眼睛就是答案。
$(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
});