Question

编辑：我已经成功修复了它，我只是将我的其他代码放在我的第一个内联代码中，而不是使用2个单独的代码，以便它使用jQuery.noConflict();函数的次数越来越少。

OLD：

<!-- 1st script -->
<script>
  jQuery.noConflict();
  jQuery(document).ready(function() {
        jQuery('#myTable').DataTable( {
            dom: 'Bfrtip',
            buttons: [
                'copyHtml5',
                'excelHtml5',
                'csvHtml5',
                'pdfHtml5',
                {
                  extend: 'print',
                  exportOptions: {
                    columns: [ 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 ]
                  }
                }
            ]
        } );
    } );
</script>

<!-- ANOTHER script -->
<script type="text/javascript">
  jQuery.noConflict();
  /*global $, SyntaxHighlighter*/

  var oTable;


  jQuery(document).ready(function () {
    'use strict';

    var datepickerDefaults = {
      showTodayButton: true,
      showClear: true
    };

    jQuery('#myTable').dataTable().yadcf([
      {column_number: 7, filter_type: "range_date", datepicker_type: 'bootstrap-datetimepicker', date_format: 'MM/DD/YYYY', filter_plugin_options: datepickerDefaults}
    ]);

    SyntaxHighlighter.all();
  });
</script>

新：

<script>
  jQuery.noConflict();
  jQuery(document).ready(function() {
        jQuery('#myTable').DataTable( {
            dom: 'Bfrtip',
            buttons: [
                'copyHtml5',
                'excelHtml5',
                'csvHtml5',
                'pdfHtml5',
                {
                  extend: 'print',
                  exportOptions: {
                    columns: [ 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 ]
                  }
                }
            ]
        } );

        // just put it inside, rather than having separate
        var datepickerDefaults = {
          showTodayButton: true,
          showClear: true
        };

        jQuery('#myTable').dataTable().yadcf([
          {column_number: 7, filter_type: "range_date", datepicker_type: 'bootstrap-datetimepicker', date_format: 'MM/DD/YYYY', filter_plugin_options: datepickerDefaults}
        ]);

    } );
</script>

非常感谢那些试图帮助的人！ =）

我有一个问题，我的页面侧边栏的下拉列表不起作用。我很确定它是我使用的给定模板的jQuery冲突。

我使用了来自datatables.net的数据表，使用了很多jQuery库，还有一个名为yadcf的插件(Yet Another DataTables Column Filter)

我使用了jQuery的noConflict功能，对于我得到它的第一个计时器，但是现在我打电话给yadcf插件后，下拉列表再次无效。我真的很困惑，因为我现在无法告诉我的错误。我希望所有人和谐地工作。

我还想反馈我的代码，因为我知道我有初学者错误，比如我调用了太多的库，我该怎么办才能避免再次出现这类错误。 =）提前谢谢你！

以下是我的页面的屏幕截图:(隐藏了不必要的隐私数据）

以下是代码：

代码开头（顶部代码），带有jQuery代码和noConflict代码，其中myTable是我的表的名称，我没有包含它，因为它工作正常。< / p>

<!DOCTYPE html>
<html lang="en">
  <head>
      <!-- Bootstrap (CUSTOM) CSS -->    
      <link href="css/bootstrap.min2.css" rel="stylesheet">

      <!-- <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> -->

      <!-- JQuery Datatables CSS -->
      <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css">

      <!-- JQuery Datatables Buttons CSS -->
      <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/buttons/1.4.2/css/buttons.dataTables.min.css">

      <!-- Bootstrap Datetime Picker (from yadcf) CSS  -->
      <link href="css/bootstrap-datetimepicker.css" rel="stylesheet" type="text/css"/>

      <!-- Datatables YADCF CSS -->
      <link href="css/jquery.dataTables.yadcf.css" rel="stylesheet" type="text/css" />

      <!-- What JQuery is this?  -->
      <script src="https://code.jquery.com/jquery-1.12.4.js"></script>

      <!-- Moment JS (from yadcf)  -->
      <script src="js/moment.min.js"></script>


      <!-- Bootstrap.min JS -->
      <script src="js/bootstrap.min.js"></script>

      <!-- Bootstrap Datetime Picker JS (from yadcf) -->
      <script src="js/bootstrap-datetimepicker.js"></script>

      <!-- JQuery Datatables.min JS -->
      <script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>

      <!-- JQuery Datatables YADCF .js -->
      <script src="js/jquery.dataTables.yadcf.js"></script>

      <!-- JQuery Datatables Buttons .js -->
      <script src="https://cdn.datatables.net/buttons/1.4.2/js/dataTables.buttons.min.js"></script>

      <!-- JSZip JS (?)  -->
      <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>

      <!-- JQuery Datatables Buttons Additional .js -->
      <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.32/pdfmake.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.32/vfs_fonts.js"></script>
      <script src="https://cdn.datatables.net/buttons/1.4.2/js/buttons.html5.min.js"></script>
      <script src="https://cdn.datatables.net/buttons/1.4.2/js/buttons.print.min.js"></script>

    <script>
      jQuery.noConflict();
      jQuery(document).ready(function() {
            jQuery('#myTable').DataTable( {
                dom: 'Bfrtip',
                buttons: [
                    'copyHtml5',
                    'excelHtml5',
                    'csvHtml5',
                    'pdfHtml5',
                    {
                      extend: 'print',
                      exportOptions: {
                        columns: [ 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12 ]
                      }
                    }
                ],
                "columnDefs": [
                    {
                        "targets": [ 12 ],
                        "visible": false
                    },
                    {
                        "targets": [ 13 ],
                        "searchable": false
                    }
                ]
            } );
        } );
    </script>

    <script type="text/javascript">
      jQuery.noConflict();
      /*global $, SyntaxHighlighter*/

      var oTable;


      jQuery(document).ready(function () {
        'use strict';

        var datepickerDefaults = {
          showTodayButton: true,
          showClear: true
        };

        jQuery('#myTable').dataTable().yadcf([
          {column_number: 7, filter_type: "range_date", datepicker_type: 'bootstrap-datetimepicker', date_format: 'MM/DD/YYYY', filter_plugin_options: datepickerDefaults}
        ]);

        SyntaxHighlighter.all();
      });
    </script>

结束代码（在.html文件的底部），注意我是如何注释掉jquery.js文件的。它是我下载的模板的js文件。

如果我发表评论，我的数据表工作正常，但下拉列表并不适用。如果我不发表评论，反之亦然。

<!-- container section end -->
    <!-- javascripts -->
    <!-- <script src="js/jquery.js"></script> -->
    <script src="js/bootstrap.min.js"></script>
    <!-- nice scroll -->
    <script src="js/jquery.scrollTo.min.js"></script>
    <script src="js/jquery.nicescroll.js" type="text/javascript"></script>

    <!-- jquery ui -->
    <script src="js/jquery-ui-1.9.2.custom.min.js"></script>

    <!--custom checkbox & radio-->
    <script type="text/javascript" src="js/ga.js"></script>
    <!--custom switch-->
    <script src="js/bootstrap-switch.js"></script>
    <!--custom tagsinput-->
    <script src="js/jquery.tagsinput.js"></script>

    <!-- colorpicker -->

    <!-- bootstrap-wysiwyg -->
    <script src="js/jquery.hotkeys.js"></script>
    <script src="js/bootstrap-wysiwyg.js"></script>
    <script src="js/bootstrap-wysiwyg-custom.js"></script>
    <!-- ck editor -->
    <script type="text/javascript" src="assets/ckeditor/ckeditor.js"></script>
    <!-- custom form component script for this page-->
    <script src="js/form-component.js"></script>
    <!-- custome script for all page -->
    <script src="js/scripts.js"></script>
  </body>
</html>

非常感谢任何帮助。非常感谢你提前！ =）

jQuery Conflict，侧边栏的下拉功能不起作用

0 个答案: