плагин jquery при нажатии не работает с динамическим контентом

Question

Я пытаюсь создать простой плагин jquery для моей веб-страницы. Проблема, с которой я здесь сталкиваюсь, заключается в обработке клика даже для динамического содержимого.
Я пытался использовать document on click selector, но это не работает, но использует select on click отлично работает при загрузке страницы, но на динамическом контенте - нет.Когда я использую $(document).on("click", clickedElement, function(event) для события щелчка, утешительное $(this).data("object-id") покажет неопределенное.

<span class="openModalTemplate" data-object-id="item100">Open 1</span>
<span class="openModalTemplate" data-object-id="item101">Open 2</span>
<span class="openModalTemplate" data-object-id="item103">Open 3</span>

<script>
$(function(){
  $(".openModalTemplate").Template({
    element: "#newOpen"
    type: "product"
  });
});
</script>

Моя функция

(function($){
    $.fn.Template = function(options) {
        var clickedElement = $(this);
        if(typeof options === "object") {
             options  = $.extend(true, options, {
                 /*Locals*/
                element: '#createObjectElement',
                type: "product",
                action: null,
                apiURL: null,
                object: null,
                categoryType: "ITEM"
            });
        }


        $(document).on("click", clickedElement, function(event){
        //clickedElement.on("click", function(event){
            var currentElemnt = $(this);
            var action_id = $(this).data("object-id");
            //if(action_id  === undefined){action_id = options.action;}

            if(options.type =="close"){

            }
            console.log("action_id", action_id);
            console.log("element", options.element);

            if (options.onAfterOpen !== undefined) {
                 options.onAfterOpen(event);
             }
             if (options.onAfterClose !== undefined) {
                 options.onAfterClose(event);
             }
             if (options.onError !== undefined) {
                 options.onError(event);
             }
             event.preventDefault();
        });

    };
})(jQuery);

Answer 1

• к сожалению, из поиска нет способа сделать это изнутри плагина .. набор плагинов для существующих элементов, а не новый .. поэтому вам нужно снова запустить плагин для вновь созданногоelements

• И когда вы обновляете плагин, события запускаются несколько раз, и во избежание этого вы можете добавить класс к элементам, а затем удалить класс внутри плагина ..

см. Изменения ниже

(function($){
    $.fn.Template = function(settings) {  //<<< here
        var clickedElement = $(this);
        clickedElement.removeClass('ToPlugin'); //<<<< remove ToPlugin class
        if(typeof settings === "object") {  //<<<<<< here
             var options  = $.extend({
                 /*Locals*/
                element: '#createObjectElement',
                type: "product",
                action: null,
                apiURL: null,
                object: null,
                categoryType: "ITEM"
            } , settings); //<<<<< here
        }


        
        clickedElement.on("click", function(event){
            var currentElemnt = $(this);
            var action_id = $(this).data("object-id");
            //if(action_id  === undefined){action_id = options.action;}

            if(options.type =="close"){

            }
            console.log("action_id", action_id);
            console.log("element", options.element);

            if (options.onAfterOpen !== undefined) {
                 options.onAfterOpen(event);
             }
             if (options.onAfterClose !== undefined) {
                 options.onAfterClose(event);
             }
             if (options.onError !== undefined) {
                 options.onError(event);
             }
             event.preventDefault();
        });

    };
})(jQuery);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button>Add Span</button>
<span class="openModalTemplate ToPlugin" data-object-id="item100">Open 1</span>
<span class="openModalTemplate ToPlugin" data-object-id="item101">Open 2</span>
<span class="openModalTemplate ToPlugin" data-object-id="item103">Open 3</span>

<script>
$(function(){
  
  refresh_Template();  // use the function onload
  var i = 4;
  $('button').on('click' , function(){
    $('body').append('<span class="openModalTemplate ToPlugin" data-object-id="item10'+i+'">Open '+i+'</span>');
    i++;
    refresh_Template();  // use the function on click
  });
});
// create a function to refresh the plugin instead of repeat it every time
function refresh_Template(){
   $(".openModalTemplate.ToPlugin").Template({
    element: "#newOpen",
    type: "product"
  });
}
</script>

Примечание: не забудьте добавить класс ToPlugin к любому элементу, с которым необходимо использовать плагин (оба статическиеи динамические элементы)