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

您似乎希望将加载项应用于已动态加载的元素。那不是什么＆＃39; on＆＃39;是为了。

委派事件在父/祖先元素处侦听特定事件（例如＆＃34;点击＆＃34;），然后过滤可能的收件人，然后执行提供的对导致事件的任何匹配元素起作用。

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

实施例

在ajax加载的成功部分中，应用addin：

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

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

e.g。

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

使用jQuery调用插件.on（）加载

1 个答案:

实施例