jquery-ui 显示未捕获的类型错误

Question

我在 jquery-ui 中使用 Selectmenu 时遇到问题，每次我尝试单击拖放时它都会在控制台中显示此错误：

Uncaught TypeError: Cannot read property 'index' of undefined

我已经为此导入了所有需要的文件，例如 jquery、jquery-ui 和所有需要的组件以使其正常工作。任何导致错误的想法？

代码如下：

<!DOCTYPE html>
<html>

<head>

    <meta charset="utf-8" />>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">

    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    <script src="js/jquery.validate.min.js"></script>

    <link rel ="stylesheet" href = "bootstrap-4.3.1-dist/css/bootstrap.min.css"/>
    <link rel ="stylesheet" href = "fontawesome-free-5.15.2-web/css/fontawesome.min.css"/>


<!--    Jquery UI-->

    <link rel ="stylesheet" href = "jquery-ui-1.12.1.custom/jquery-ui.css"/>
    <link rel ="stylesheet" href = "jquery-ui-1.12.1.custom/jquery-ui.structure.css"/>
    <link rel ="stylesheet" href = "jquery-ui-1.12.1.custom/jquery-ui.theme.css"/>



<!--   xxxx-->

    <script src="bootstrap-4.3.1-dist/js/bootstrap.min.js"></script>
    <script src="jquery-ui-1.12.1.custom/jquery-ui.js"></script>
    <script src="fontawesome-free-5.15.2-web/js/fontawesome.min.js"></script>


    <script src="main.js"></script>
    <script>
        $( function() {
            $.widget( "custom.iconselectmenu", $.ui.selectmenu, {
                _renderItem: function( ul, item ) {
                    var li = $( "<li>" ),
                        wrapper = $( "<div>", { text: item.label } );

                    if ( item.disabled ) {
                        li.addClass( "ui-state-disabled" );
                    }

                    $( "<span>", {
                        style: item.element.attr( "data-style" ),
                        "class": "ui-icon " + item.element.attr( "data-class" )
                    })
                        .appendTo( wrapper );

                    return li.append( wrapper ).appendTo( ul );
                }
            });

            $( "#filesB" )
                .iconselectmenu()
                .iconselectmenu( "menuWidget" )
                .addClass( "ui-menu-icons customicons" );
        } );
    </script>

    <div id="main" style="height: 100%; width: 100%;">
        <script>
            $(function() {
                $("#main").load("header.html");
            });
        </script>
    </div>

    <style>
    
 
        /* select with custom icons */
        .ui-selectmenu-menu .ui-menu.customicons .ui-menu-item-wrapper {
            padding: 0.5em 0 0.5em 3em;
        }
        .ui-selectmenu-menu .ui-menu.customicons .ui-menu-item .ui-icon {
            height: 24px;
            width: 24px;
            top: 0.1em;
        }
        .ui-icon.video {
            background: url("logo-small.png") 0 0 no-repeat;
        }
        .ui-icon.podcast {
            background: url("logo-small.png") 0 0 no-repeat;
        }
        .ui-icon.rss {
            background: url("logo-small.png") 0 0 no-repeat;
        }


    </style>
</head>


<body>




    <div id="lineContent" style="width:100%;">

        <div class="row" style = "margin:0px;padding:0px;">

            <div class="col-md-12" style="margin:0px;padding:0px;">
                <div class = "row">
                    <div class = "col-md-2" style="margin:0px;padding:0px;">

                    </div>
                    <div class = "col-md-10" style ="margin:0px;padding:0px;">



                <div style="margin-bottom: 30px;">
                    <p><a href="accounts.html">Add Account </a>>> LINE</p>

                </div><br>



                        <form name="lineform" id = "line-form" action="main.html" method="POST" onsubmit="insertDB(event,'line')">
                    <div>
                        <p class="labels required">Channel Name:</p>
                        <p class="labels"><input pattern="^[a-zA-Z\s]+$" oninvalid="setCustomValidity('Please enter on alphabets only. ')" type="text" id="chname" name="chname" style = "width:50%" value="" placeholder="Enter your Channel Name" required></p>
                    </div><br>
                    <div>
                        <p class="labels required">Channel Id:</p>
                        <p class="labels "><input type="text" id="chid" name="chid" value="" style = "width:50%" placeholder="Enter your Channel ID" required></p>
                    </div><br>
                    <div>
                        <p class="labels required">Channel Access Token:</p>
                        <p class="labels "><input type="text" id="chtoken" name="chtoken" value="" placeholder="Enter your Channel Access Token" style = "width: 50%" required></p>
                    </div><br>
                    <div><i class="fa fa-line"></i></i></div>
                    <div class = "select">
                        <h2>Selectmenu with custom icon images</h2>
                        <fieldset>
                            <label for="filesB">Select a podcast:</label>
                            <select name="filesB" id="filesB">
                                <option value="mypodcast" data-class="podcast">John Resig Podcast</option>
                                <option value="myvideo" data-class="video">Scott Gonz&#xE1;lez Video</option>
                                <option value="myrss" data-class="rss">jQuery RSS XML</option>
                            </select>
                        </fieldset>
                    </div>
                          <div>
                        <button style="background-color:#1f73b7!important;"class="btn btn-primary" type="submit">Submit</button>
                    </div><br>

                </form>
                    </div>

                </div>


            </div>

        </div>
    </div>


</body>

非常感谢。

Answer 1

当我运行一个稍微干净的代码版本时，我无法重现这个问题。

$(function() {
  $.widget("custom.iconselectmenu", $.ui.selectmenu, {
    _renderItem: function(ul, item) {
      var li = $("<li>"),
        wrapper = $("<div>", {
          text: item.label
        });

      if (item.disabled) {
        li.addClass("ui-state-disabled");
      }

      $("<span>", {
          style: item.element.attr("data-style"),
          "class": "ui-icon " + item.element.attr("data-class")
        })
        .appendTo(wrapper);

      return li.append(wrapper).appendTo(ul);
    }
  });

  $("#filesB")
    .iconselectmenu()
    .iconselectmenu("menuWidget")
    .addClass("ui-menu-icons customicons");
});

/* select with custom icons */

.ui-selectmenu-menu .ui-menu.customicons .ui-menu-item-wrapper {
  padding: 0.5em 0 0.5em 3em;
}

.ui-selectmenu-menu .ui-menu.customicons .ui-menu-item .ui-icon {
  height: 24px;
  width: 24px;
  top: 0.1em;
}

.ui-icon.video {
  background: url("logo-small.png") 0 0 no-repeat;
}

.ui-icon.podcast {
  background: url("logo-small.png") 0 0 no-repeat;
}

.ui-icon.rss {
  background: url("logo-small.png") 0 0 no-repeat;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css">
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div id="lineContent" style="width:100%;">
  <div class="row" style="margin:0px;padding:0px;">
    <div class="col-md-12" style="margin:0px;padding:0px;">
      <div class="row">
        <div class="col-md-2" style="margin:0px;padding:0px;"></div>
        <div class="col-md-10" style="margin:0px;padding:0px;">
          <div style="margin-bottom: 30px;">
            <p><a href="accounts.html">Add Account </a>>> LINE</p>
          </div><br>
          <form name="lineform" id="line-form" action="main.html" method="POST" onsubmit="insertDB(event,'line')">
            <div>
              <p class="labels required">Channel Name:</p>
              <p class="labels"><input pattern="^[a-zA-Z\s]+$" oninvalid="setCustomValidity('Please enter on alphabets only. ')" type="text" id="chname" name="chname" style="width:50%" value="" placeholder="Enter your Channel Name" required></p>
            </div><br>
            <div>
              <p class="labels required">Channel Id:</p>
              <p class="labels "><input type="text" id="chid" name="chid" value="" style="width:50%" placeholder="Enter your Channel ID" required></p>
            </div><br>
            <div>
              <p class="labels required">Channel Access Token:</p>
              <p class="labels "><input type="text" id="chtoken" name="chtoken" value="" placeholder="Enter your Channel Access Token" style="width: 50%" required></p>
            </div><br>
            <div><i class="fa fa-line"></i></div>
            <div class="select">
              <h2>Selectmenu with custom icon images</h2>
              <fieldset>
                <label for="filesB">Select a podcast:</label>
                <select name="filesB" id="filesB">
                  <option value="mypodcast" data-class="podcast">John Resig Podcast</option>
                  <option value="myvideo" data-class="video">Scott Gonz&#xE1;lez Video</option>
                  <option value="myrss" data-class="rss">jQuery RSS XML</option>
                </select>
              </fieldset>
            </div>
            <div>
              <button style="background-color:#1f73b7!important;" class="btn btn-primary" type="submit">Submit</button>
            </div><br>
          </form>
        </div>
      </div>
    </div>
  </div>
</div>

这表明您的 JavaScript 代码某处存在错误。您需要清理代码并确保没有语法错误。

jquery-ui 显示未捕获的类型错误

jquery-ui is showing uncaught type errors

html

css

jquery

jquery-ui