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

【问题标题】：Calling a plugin .on() load using jQuery使用 jQuery 调用插件 .on() 加载
【发布时间】：2014-06-09 15:22:54
【问题描述】：

我正在调用一些 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);
            });
        }
    };
});

【问题讨论】：

你有没有尝试过你真正想要的事件，比如click等等
您是否尝试绑定到由 Ajax 加载的元素？如果是这样，请将document 用于on 绑定，而不要使用body（body 似乎有一些“怪癖”），并从“点击”之类的控件中指定您想要的实际事件:)
插件实际上是监听事件而不是触发事件。如果这有意义的话！
那你想做什么？触发特殊事件还是什么？如果您只想在加载元素后附加插件，您可以在 ajax 调用的回调中执行此操作？
@adeneo 抱歉含糊不清。我已经添加了上面的插件代码。是的，我知道我可以在回调中调用插件试图避免这种情况，因为如果我有多个地方需要加载上述插件，我将需要始终在所有回调中调用插件。谢谢

标签： javascript jquery ajax

【解决方案1】：

您似乎希望将插件应用到已动态加载的元素。这不是'on'的用途。

委托事件在父/祖先元素上侦听特定事件（如“点击”），然后过滤可能的接收者，然后针对任何匹配元素执行提供的函数导致事件发生的原因。

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

示例：

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

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

如果您加载了屏幕的特定部分（可能），则将选择器定位到该元素：

例如

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

【讨论】：