对于.on()方法,我有点困惑。让我试着解释一下:
我需要使用.on()格式为:$(document).on('click', 'selector', function (e) {});
,而不是$('selector').on('click', function(e) {});
,以便它也适用于现有元素和动态加载的元素。
我在这里创建了一个关于我的问题的简化示例:
$(document).ready(function () {
var obj = $('.testing');
// Doesn't work
$(document).on('click', obj, function (e) {
e.preventDefault();
alert($(this).text());
});
// Works, but won't work for new elements
obj.on('click', function (e) {
e.preventDefault();
alert($(this).text());
});
});
当我已经在一个变量中设置了选择器,并且jQuery实例已经包装在它周围时,它是第二个示例的正确格式,而不是第一个示例的格式,因为它已经被包装为一个jQuery实例。从'.selector'
到$('.selector')
很容易,但是从$('.selector')
到'.selector'
有路吗?
我的问题是,有什么方法可以解开jQuery实例,这样我就可以解析选择器而不是已经通过jQuery包装的选择器?
我在这里创建了一个JSFiddle:http://jsfiddle.net/MzwK8/
任何指点或帮助都将不胜感激。
编辑对不起,在我的例子中,我应该说我已经对它做了很多简化,但是选择器已经被解析为jQuery实例,比如$('.selector').plugin()
。我应该说我没有能力改变var obj = $('.testing');
行
发布于 2014-02-01 10:56:50
我认为获得选择器字符串是解决整个问题的错误方法,以下是原因:
我知道您希望$('.foo').plugin()
同时使用现有的和未来的.foo
元素,对吗?
但是,如果没有现有的.foo
元素,会发生什么?插件函数甚至不会被执行,因此事件委托也不会被设置。这意味着,只有在已经存在插件的情况下,插件才能用于未来的.foo
元素。从用户的角度来看,这是一个相当令人困惑的行为。
我认为,在您的用例中,创建一个静态插件更有意义,它只接受选择器字符串:
$.plugin = function(selector) { ... };
$.plugin('div.bar');
许多回答提到了obj.selector
,但是文献资料将此属性标记为不推荐使用和删除。他们的建议是:
需要在插件中使用选择器字符串的插件可能需要将其作为方法的参数。例如,可以将"foo“插件编写为 $.fn.foo =函数(选择器,选项){ /*插件代码在这里*/ }; 使用插件的人会写 $( "div.bar“).foo( "div.bar",{dog:"bark"} ); 将
"div.bar"
选择器重复作为.foo()
的第一个参数。“
这就是您在插件中应该做的:要求选择器作为插件方法的参数。
发布于 2014-02-01 10:48:47
第二个参数应该是选择器,而不是jQuery对象:
$(document).on('click', '.testing', function (e) {
e.preventDefault();
alert($(this).text());
});
如果可能的话,应该将事件绑定到与要添加的元素最近的现有元素上。这样,它就不必为页面中发生的每一次点击测试选择器。
发布于 2014-02-01 10:49:40
如果您想撤回原来的选择器,可以这样做:
var obj = $('.testing');
console.log( obj.selector); // will log .testing
https://stackoverflow.com/questions/21502026
复制