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

不幸的是，通过搜索无法从插件内部执行此操作.. 为当前元素设置的插件不是新元素.. 所以你需要运行插件再次为新创建的元素
并且当您刷新插件时，事件会多次触发，为避免这种情况，您可以将 class 添加到元素中，然后删除插件中的 class ..

查看以下更改

(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>

注意：不要忘记将 class ToPlugin 添加到您需要使用插件的任何元素（静态和动态元素)

jquery 点击插件不适用于动态内容

jquery plugin on click doesn't work on dynamic content

javascript

jquery

jquery-plugins