Question

我将所有JavaScript函数都放在一个名为site.js

的文件中

此文件在我的主布局页面的底部声明，以便加快加载速度。

但是我注意到我的一些功能不起作用，除非我在文件中切换它们的顺序。例如，这两个函数的以下顺序会阻止datetimepicker小部件工作。

$(function() {
  $(".js-multi-select").select2();
});

$(function () {
  $('#start_dt').datetimepicker({
     showTodayButton: true,
     format: 'D MMM YYYY HH:mm',
     defaultDate: moment().hours(0).minute(0)
   });
});

如果我切换订单并将datetimepicker功能放在select2功能之前，那么它似乎有效。

$(function () {
  $('#start_dt').datetimepicker({
     showTodayButton: true,
     format: 'D MMM YYYY HH:mm',
     defaultDate: moment().hours(0).minute(0)
   });
});

$(function() {
  $(".js-multi-select").select2();
});

请注意，我的datetimepicker字段所在的页面没有select2下拉列表字段，而我有select2下拉列表的页面并不总是有datetimepicker字段。我不想为每个函数都有十几个javascript文件，这就是我将它们全部放在一个文件中的原因。

为什么上述函数以这种方式运行，修复是什么，这样无论它们被声明的顺序如何，它们都能正常工作。

Answer 1

只需删除第二个doc.ready函数，然后将代码放在第一个。

$(function () {
   $('#start_dt').datetimepicker({
     showTodayButton: true,
     format: 'D MMM YYYY HH:mm',
     defaultDate: moment().hours(0).minute(0)
  });
  $(".js-multi-select").select2();
});

Answer 2

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>select2</title>
<script src="./jquery.min.js"> </script>
<link href="./jquery.datetimepicker.css" rel="stylesheet" />
<script src="./jquery.datetimepicker.js"></script>
<link href="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/css/select2.min.css" rel="stylesheet" />
<script src="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/js/select2.min.js"></script>
<script>
$(function(){
    $('#start_dt').datetimepicker(); 
 });

$(function() {
    $(".js-example-basic-single").select2();
}); 

</script>
</head>
<body>
    <select class="js-example-basic-single">
      <option value="AL">Alabama</option>
      <option value="WY">Wyoming</option>
    </select>
    <input type="text" id="start_dt"/>
</body>
</html>

有可能会有其他事情发生在你身上。

因为在上面的页面中我尝试将类js-example-basic-single重命名为js-example-basic-single1，以便select2的选择器变空。 select2（）调用不会产生js错误。

二，我重新安排了电话的顺序，但事情按预期工作。

因此，它应该是其他东西恕我直言。

Javascript函数在单个文件中导致冲突

2 个答案: