[英]jQuery script works only once, then TypeError: $(…) is not a function
I've downloaded this script for use conditional fields in forms: 我已下载此脚本以在表单中使用条件字段:
(function ($) {
$.fn.conditionize = function(options) {
var settings = $.extend({
hideJS: true
}, options );
$.fn.showOrHide = function(is_met, $section) {
if (is_met) {
$section.slideDown();
}
else {
$section.slideUp();
$section.find('select, input').each(function(){
if ( ($(this).attr('type')=='radio') || ($(this).attr('type')=='checkbox') ) {
$(this).prop('checked', false).trigger('change');
}
else{
$(this).val('').trigger('change');
}
});
}
}
return this.each( function() {
var $section = $(this);
var cond = $(this).data('condition');
// First get all (distinct) used field/inputs
var re = /(#?\w+)/ig;
var match = re.exec(cond);
var inputs = {}, e = "", name ="";
while(match !== null) {
name = match[1];
e = (name.substring(0,1)=='#' ? name : "[name=" + name + "]");
if ( $(e).length && ! (name in inputs) ) {
inputs[name] = e;
}
match = re.exec(cond);
}
// Replace fields names/ids by $().val()
for (name in inputs) {
e = inputs[name];
tmp_re = new RegExp("(" + name + ")\\b","g")
if ( ($(e).attr('type')=='radio') || ($(e).attr('type')=='checkbox') ) {
cond = cond.replace(tmp_re,"$('" + e + ":checked').val()");
}
else {
cond = cond.replace(tmp_re,"$('" + e + "').val()");
}
}
//Set up event listeners
for (name in inputs) {
$(inputs[name]).on('change', function() {
$.fn.showOrHide(eval(cond), $section);
});
}
//If setting was chosen, hide everything first...
if (settings.hideJS) {
$(this).hide();
}
//Show based on current value on page load
$.fn.showOrHide(eval(cond), $section);
});
}
}(jQuery));
I'm trying this because I need to use conditionize() in one of my tabs and when I reload the tab, all works but if I go to other tab and I return to the previous tab(where I need this works), I get that error. 我正在尝试执行此操作是因为我需要在其中一个选项卡中使用conditionize(),并且当我重新加载该选项卡时,所有功能都可以使用,但是如果我转到其他选项卡并返回到上一个选项卡(需要该功能的地方),得到那个错误。
When I change tabs, I'm only reloading one part of the page. 更改标签时,我只会重新加载页面的一部分。
When I load the page this works perfectly, but if I try to call function again from browser console, it tells me that TypeError: $(...)conditionize() is not a function
. 当我加载页面时,这是完美的,但是如果我尝试从浏览器控制台再次调用函数,它会告诉我
TypeError: $(...)conditionize() is not a function
。
I have included the script in header tag and I'm calling it with this script on the bottom of body: 我已将该脚本包含在header标签中,并使用此脚本在正文底部对其进行了调用:
<script type="text/javascript">
$('.conditional').conditionize();
</script>
EDIT: 编辑:
I have written 我已经写了
<script type="text/javascript">
console.log($('.conditional').conditionize);
setTimeout(function () {console.log($('.conditional').conditionize);}, 2);
</script>
and this print me at console the function, and when 2 milliseconds have passed, it print me undefined
这会在控制台上显示我的功能,并且经过2毫秒后,我会
undefined
打印我
I have found the solution. 我找到了解决方案。
Because any reason, the $ object and jQuery object are not the same in my code. 由于任何原因,$对象和jQuery对象在我的代码中都不相同。
I have discovered it using this on browser console: 我在浏览器控制台上使用它发现了它:
$===jQuery
This return false (This was produced because in other JS, I was using the noConflict()
, which give me the problem) 返回false(这是因为在其他JS中,我使用的是
noConflict()
,这给我带来了问题)
Explanation: noConflict() 说明: noConflict()
So I have solved it changing the last line of my JS by: 所以我通过以下方法解决了更改JS最后一行的问题:
//Show based on current value on page load
$.fn.showOrHide(eval(cond), $section);
});
}
}($));
Putting the $
instead of 'jQuery'
用
$
代替'jQuery'
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.