Calling a plugin .on() load using jQuery

Question

I am calling some jQuery plugins that attaches themselves to element on DOM ready. These plugins manipulate the DOM when certain events has occurred (click, change etc,)

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

Above works fine on DOM ready. However, if I'm loading some HTML from an AJAX call I have to use .on() to guarantee events gets bound consistently.

The question is which event I should bind the plugin to? I have tried below and it doesn't seem to respond.

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

Here's the checkbox() plugin I'm referring to above. If that's any help. :)

'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

You appear to want to apply add-ins to elements that have been loaded dynamically. That is not what 'on' is for.

Delegated events listen for specific events (like "click") at a parent/ancestor element then filter the possible recipients, then executes the supplied function against any matching elements that caused the event.

You actually need to apply the add-in code after your Ajax load completes.

Example:

In the success part of your ajax load, apply the addin:

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

If you loaded a specific part of the screen (likely), then target the selector at that element:

eg

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