Javascript 如何将我的jQuery插件应用于动态创建的元素

我正在构建一个应用程序，它可以动态生成以post-it notes为样式的部分元素。我将此应用程序配置为jQuery插件的形式。生成分区的函数运行良好，但我无法在分区上呈现我的默认插件样式选项。基本上，我的插件似乎不适用于我动态创建的元素。有没有关于如何解决这个问题的建议？请参阅下面的代码。谢谢

index.html

    <div id="mylist"></div>

    <input type="button" id="NewElement" value="New Element">

    <script src="script.js"></script>

    <script>
      $("section").newNote();
    </script>

index.html
$（“节”）.newNote（）；

script.js
（函数（$）{
$.fn.newNote=函数（选项）{
$（'#NewElement'）。在（'click'，function（）上{
$（'#mylist'）。追加（
）；
});
变量设置=$.extend({
半径：3，
边界：0，
背景：“线性梯度（#f9efaf，#f7e98d）”，
调整大小：“无”，
宽度：“20%”，
填充：20，
溢出：“隐藏”，
身高：200，
保证金：“1%”，
浮动：“左”
}，选项）；
返回这个.css({
半径：settings.radius，
背景：settings.background，
调整大小：settings.resize，
宽度：settings.width，
填充：settings.padding，
溢出：settings.overflow，
高度：settings.height，
margin:settings.margin，
float:settings.float
});
};
}（jQuery））；

更新您的方法，如下面的代码片段所示

（函数（$）{
$（文档）.on（'click'，'#NewElement'，函数（）{
$（'#mylist'）。追加（
）；
$（'section'）.newNote（）；
});
$.fn.newNote=函数（选项）{
变量设置=$.extend({
半径：3，
边界：0，
背景：“线性梯度（#f9efaf，#f7e98d）”，
调整大小：“无”，
宽度：“20%”，
填充：20，
溢出：“隐藏”，
身高：200，
保证金：“1%”，
浮动：“左”
}，选项）；
返回这个.css({
半径：settings.radius，
背景：settings.background，
调整大小：settings.resize，
宽度：settings.width，
填充：settings.padding，
溢出：settings.overflow，
高度：settings.height，
margin:settings.margin，
float:settings.float
});
};
}（jQuery））

您要寻找的术语是事件删除当您创建新元素时，您实际上需要重新初始化您的生活。它不会影响将来将要创建的元素。@JaromandaX您建议如何使用事件委派来解决此问题？谢谢！但是，我希望有一个设置，生成部分元素的函数保留在script.js中，而初始化代码保留在html文件中。我怎样才能做到这一点？不幸的是，这个问题没有完全解决。你知道我如何将元素生成函数保存在script.js中，并在HTML页面中的脚本标记之间保留初始化代码吗？请显示code script.js文件，并且，你是否在不同页面中使用相同的文件？我也更新了上面的代码。一个是index.html，另一个是script.js。更新了我的答案，请检查一下，让我知道它是否有效
script.js

(function ( $ ) {
$.fn.newNote = function(options) {

    $('#NewElement').on('click',function(){
        $('#mylist').append("<section></section><br />");
    });

        var settings = $.extend({
            radius: 3,
            border: 0,
            background: "linear-gradient(#f9efaf, #f7e98d)",
            resize: "none",
            width: "20%",
            padding: 20,
            overflow: "hidden",
            height: 200,
            margin: "1%",
            float: "left"
        }, options );

        return this.css({
            radius: settings.radius,
            background: settings.background,
            resize: settings.resize,
            width: settings.width,
            padding: settings.padding,
            overflow: settings.overflow,
            height: settings.height,
            margin: settings.margin,
            float: settings.float
        });
};
}( jQuery ));