Question

我正在构建一个应用程序，该应用程序动态生成样式为便条纸的部分元素。我正在配置此应用程序以采用jQuery插件的形式。生成部分的功能运行良好，但是我无法将默认的插件样式选项呈现到这些部分上。基本上，我的插件似乎不适用于动态创建的元素。有关如何解决此问题的任何建议？请参阅下面的代码。谢谢！

index.html

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

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

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

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

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

Answer 1

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

(function ( $ ) {

 $(document).on('click', '#NewElement', function () {
        $('#mylist').append("<section></section><br />");
        $('section').newNote();
 });

$.fn.newNote = function(options) {
        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 ));

<div id="mylist"></div>
<input type="button" id="NewElement" value="New Element">
<script src="script.js"></script>

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

1 个答案: