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

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

1 个答案: