[英]Calling a plugin .on() load using jQuery
I am calling some jQuery plugins that attaches themselves to element on DOM ready. 我正在调用一些jQuery插件,这些插件将自身附加到DOM准备就绪的元素上。 These plugins manipulate the DOM when certain events has occurred (click, change etc,)
这些插件会在发生某些事件(点击,更改等)时操纵DOM。
$("body").find("input[type='checkbox']").checkbox();
Above works fine on DOM ready. 以上在DOM就绪上工作正常。 However, if I'm loading some HTML from an AJAX call I have to use
.on()
to guarantee events gets bound consistently. 但是,如果我要从AJAX调用中加载一些HTML,则必须使用
.on()
来确保事件始终绑定。
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. 这是我上面提到的checkbox()插件。 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);
});
}
};
});
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. 实际上,在Ajax加载完成之后,您实际上需要应用附加代码。
In the success part of your ajax load, apply the addin: 在ajax加载的成功部分中,应用插件:
$("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();
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.