点击时的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

• 不幸的是，通过搜索无法从插件内部执行此操作.. 为当前元素而不是新元素设置的插件.. 所以您需要为新创建的元素再次运行插件

• 当您刷新插件时，事件会触发多次，为了避免这种情况您可以向元素添加类，然后删除插件内的类..

请参阅下面的更改

(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 类添加到您需要使用插件的任何元素（静态和动态元素）