使用jQuery调用插件.on()加载

Question

我正在调用一些jQuery插件，它们将自己附加到DOM上的元素上。这些插件在发生特定事件(点击、更改等)时操作DOM

$("body").find("input[type='checkbox']").checkbox();

上面的

在DOM就绪时工作得很好。但是，如果我从AJAX调用加载一些HTML，我必须使用.on()来保证事件得到一致的绑定。

问题是我应该将插件绑定到哪个事件?我在下面试过了，它似乎没有回应。

  $("body").on("load", "input[type='checkbox']", function(){
            $(this).checkbox();
  });

这是我上面提到的checkbox()插件。如果有帮助的话。:)

'use strict';
define(['jquery'], function($){
    return function(){
        $.fn.checkbox = function (options) {
            options = options || {};
            var defaults = {
                'className': 'jquery-checkbox',
                'checkedClass': 'jquery-checkbox-on'
            };
            var settings = jQuery.extend(defaults, options);
            return this.each(function () {
                var self = jQuery(this);
                var replacement = jQuery(
                    '<span class="' + settings.className + '-wrapper">' +
                    '<a class="' + settings.className + '" href="#" name="' + self.attr('id') + '"></a>' +
                    '</span>');
                var element = jQuery('a', replacement);
                if (self.prop('checked')) {
                    element.addClass(settings.checkedClass);
                }
                element.on('click', function (event) {
                    event.preventDefault();
                    event.stopPropagation();
                    var input = jQuery('input#' + jQuery(this).attr('name'), replacement.parent());
                    if (input.prop('checked')) {
                        input.removeAttr('checked');
                    } else {
                        input.prop('checked', true);
                    }
                    input.trigger('change');
                    return false;
                });
                element.on('focusin', function (event) {
                    $(this).addClass('checkbox-focus');
                });
                element.on('focusout', function (event) {
                    $(this).removeClass('checkbox-focus');
                });
                element.on("keypress", function(e){
                    if ( e.which === 32 ){ self.prop('checked', !self.prop('checked')).change(); }
                });
                self.on('change', function (event) {
                    var input = jQuery(this);
                    if (input.prop('checked')) {
                        jQuery('a[name=' + input.attr('id') + ']', replacement.parent()).addClass(settings.checkedClass);
                    } else {
                        jQuery('a[name=' + input.attr('id') + ']', replacement.parent()).removeClass(settings.checkedClass);
                    }
                    return true;
                });
                self.css({
                    'position': 'absolute',
                    'top': '-200px',
                    'left': '-10000px'
                }).before(replacement);
            });
        }
    };
});

Answer 1

您似乎希望将插件应用于已动态加载的元素。这不是"on"的意思。

委托事件在父/祖先元素中侦听特定的事件(如"click")，然后过滤可能的接收者，然后针对导致事件的任何匹配元素执行提供的函数。

实际上需要在Ajax加载完成后应用插件代码。

例子:

在ajax加载的成功部分，应用插件:

$("input[type='checkbox']").checkbox();

如果您加载了屏幕的特定部分(可能)，那么将选择器定位于该元素:

。

$("#myloadcontainer input[type='checkbox']").checkbox();