我已经下载了 select2 并通过将其放入我的文件夹中来“安装它”。
然后我将其加载到我的网站上,当我检查控制台时,我可以看到该文件
select2.js
(我在其中看到所有正在加载的脚本)。我查看了他们的文档,复制并添加了
$("#e9").select2();
但是,当我加载页面时,出现以下错误:
TypeError: $(...).select2 is not a function
$("#e9").select2();
还有其他人经历过类似的事情吗?
有关更多信息,这是我的脚本:
jQuery(document).ready(function(){
var max_amount = parseFloat($('#max_amount').val());
$( "#item_amount" ).keyup(function() {
if($(this).val() > max_amount){
$(this).val( max_amount);
}
if( /\D/.test($(this).val()) ){
alert('Må kun indeholde tal!');
$(this).val('');
}
if($(this).val()== '0'){
alert('Må ikke være 0!');
$(this).val('');
}
});
$("#e1").select2();
});
function addToBasket(){
var amount = $('#item_amount').val();
if(amount == ""){
amount = 1;
}
if(amount > 0){
$.ajax({
type: 'POST',
url: myBaseUrl + 'Products/addItemToBasket',
dataType: 'json',
data: {
id: window.location.pathname.substring(window.location.pathname.lastIndexOf('/') + 1),
amount: amount
},
success: function (data) {
var urlToBasket = myBaseUrl+'Products/basket';
var newAmount = parseInt(amount)
var price = data[0]['Product']['pris'];
var id = data[0]['Product']['id'];
var dat = data;
var tmp_basket_html = $('#basket_amount').html();
if($('#basket_amount').html() !== " Tom"){
$('#shopping_table_body').append(
"<tr id='"+id+"'>" +
"<td class='image'>" +
""+
"</td>" +
"<td class='name'>" +
" "+data[0]['Product']['name'] +
"</td>"+
"<td class='quantity'>" +
"x "+amount +""+
"</td>"+
"<td class='total'>" +
""+price*amount+
"</td>" +
""+
"<td class='remove'>" +
"<input class='icon-remove' type='button' onclick='removeItemFromBasket("+id+")'>"+
"</td>"+
"</tr>"
);
}else{
$("#shopping_menu").append(
"<ul class='dropdown-menu topcartopen'>"+
"<li id='basket_list'>"+
"<table id='shopping_table'>"+
"<tbody id='shopping_table_body'>"+
"<tr id='"+id+"'>" +
"<td class='image'>" +
""+
"</td>" +
"<td class='name'>" +
" "+data[0]['Product']['name'] +
"</td>"+
"<td class='quantity'>" +
"x "+amount +""+
"</td>"+
"<td class='total'>" +
""+price*amount+
"</td>" +
""+
"<td class='remove'>" +
"<input class='icon-remove' type='button' onclick='removeItemFromBasket("+id+")'>"+
"</td>"+
"</tr>"+
"</table>"+
"</li>"+
"<div class='well pull-right'>"+
"<input type='button' onclick='goToBasket()' class='btn btn-success' value='Tjek ud'>"+
"</div>"+
"</ul>"
)
}
updateTotal(amount,price);
updateBasketAmount();
}
});
}
Notifier.success('Vare tilføjet', 'Tilføjet'); // text and title are both optional.
}
function updateTotal(amount, price){
var price = parseFloat(price);
var oldValue = parseFloat($('#basket_total_cost').html());
var newPrice = amount*price+oldValue;
$('#basket_total_cost').html(newPrice);
}
function updateBasketAmount(){
var tmp = $('#basket_amount').html();
if(!isNaN(tmp)){
var oldAmount = parseInt(tmp.substr(0,2));
var i = oldAmount + 1;;
$('#basket_amount').html(
""+i+" vare(r)"
);
}else{
$('#basket_amount').html(
"1"+" vare(r)"
);
}
}
function goToBasket(){
window.location.href = myBaseUrl+'Products/basket';
}
当我开始将 select2 与 XCrud 一起使用时,我遇到了这个问题。我通过禁用 XCrud 加载 JQuery 来解决这个问题,这是第二次,并将其加载到 body 标签下方。因此,请确保 JQuery 不会在您的页面上加载两次。
有同样的问题。通过延迟加载 select2 对其进行排序
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.8/js/select2.min.js" defer></script>
如果您用选择框限制 select2 的 js 文件在 select2 js 文件之前加载,则会出现此错误。 请确保文件应按此顺序排列,例如..
我也面临着同样的问题,请注意,发生此错误是因为我使用 select2 的选择器不存在或未加载。
因此请确保 $("#selector") 存在,方法是
if ($("#selector").length > 0)
$("#selector").select2();
在
$("#id").select2()
功能中添加 document.ready()
。
您可能引用了两个 jquery 脚本,这两个脚本给出了上述错误。
我使用 jQuery slim 版本并收到此错误。通过使用普通的 jQuery 版本,问题得到了解决。
这个问题已经很老了,但我会写一些小注释,因为我今天花了几个小时调查同样的问题。 在我动态加载部分代码后,select2 无法在新的选择框上运行,并出现错误“$(...).select2 不是函数”。
我发现在未打包的 select2.js 中,有一行阻止它重新处理 main 函数(在我的 3.5.4 版本中,它位于第 45 行):
if (window.Select2 !== undefined) { return; }
所以我只是在那里评论它并开始使用 select2.js (而不是缩小版本)。
//if (window.Select2 !== undefined) { // return; //}
它开始工作得很好,当然它现在可以进行多次处理而失去性能,但无论如何我需要它。
希望这有帮助, 弗拉基米尔
将
config.assets.debug = false
放入 config/environments/development.rb 中。
对我来说,
select2.min.js
文件有效,而不是 select2.full.min.js
。我手动定义了从 github page 获得的 dist 文件夹中复制的文件。还要确保您在 select2 文件之前导入了一个 jQuery(document).ready(...)
定义和 jquery 文件。
对于像我这样最终遇到这个问题的新手:如果您尝试在使用纯 javascript 而不是使用 jQuery 检索的元素上调用 .select2() ,也会发生此错误。
此操作失败,并出现“select2 不是函数”错误:
document.getElementById('e9').select2();
这有效:
$("#e9").select2();
就我而言,当 webpacker 和 sprocket 都尝试导入 jQuery 时,我在 Rails 应用程序中遇到了此错误。直到我的代码编辑器自动尝试将 jQuery 导入到 webpacker 模块中时我才注意到这一点。
我今天遇到了同样的问题,其他答案都不起作用。我不明白这是如何或为什么有效,但它确实有效,并且(敲木头)仍然有效。
但首先,介绍一下我的具体情况:
我在一个 .js 文件中使用 select2 并尝试将其放入另一个 .js 文件中,但出现此错误。 jQuery 在另一个 .js 文档中工作正常,我尝试使用的第二个文档在 html 中的调用晚于我正在编写的第一个 .js 文档,并且都晚于 jquery 和 select2 标记。
好的,现在来说说没有意义但有效的解决方案:
我将 jQuery 元素的定义放入前面的 .js 文件中,并将该变量的 .select2 放入后面的 .js 文件中。很奇怪,对吧?所以,像这样:
<head>
*blah blah blah html headers*
<script src="/static/js/jquery-3.6.0.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/select2.min.js"></script>
</head>
<body>
*blah blah blah page stuff*
<script src="/static/js/first.js"></script>
*blah blah some more stuff*
<script src="/static/js/second.js"></script>
first.js
const selector = $('#select-this')
第二个.js
selector.select2({
*&c, &c, &c.*
ControlId.select2({...});没有工作,但以下工作有效:
$(ControlId).select2({...});
有时页面无法调用同页面中的cdn可以复用的文件可以解决