2014-08-27 14 views
8

Tôi gặp sự cố khi tích hợp menu thả xuống trong biểu mẫu HTML của mình. Tôi đã thử tất cả mọi thứ tôi có thể làm và những gì tôi tìm thấy trực tuyến nhưng nó vẫn không hoạt động. Tôi thấy rằng mã này chạy đúng trên JSFiddle. Các đường dẫn kịch bản là tốt và các kịch bản được nạp một cách chính xác.Trình đơn thả xuống ngữ nghĩa-ui không hoạt động

Tôi đã bỏ lỡ điều gì đó?

<html> 
    <head> 
     <meta charset="UTF-8"> 
     <link href="../semantic/packaged/css/semantic.min.css" rel="stylesheet" type="text/css"/> 
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script> 
    <script src="../semantic/packaged/javascript/semantic.min.js"></script> 
    <script> 
    $('.ui.dropdown').dropdown(); 
    </script> 
    </head> 
    <body> 
     <form class="ui form segment" style="width:400px; margin:auto;" method="POST" action="register_do.php"> 
    <div class="field"> 
     <label>학년</label> 
     <div class="ui fluid dropdown selection"> 
     <input type="hidden" name="grade"> 
     <div class="default text">학년</div> 
     <i class="dropdown icon"></i> 
     <div class="menu"> 
      <div class="item" data-value="10">고1</div> 
      <div class="item" data-value="11">고2</div> 
      <div class="item" data-value="12">고3</div> 
     </div> 
     </div> 
    </div> 
    <div class="ui buttons"> 
       <button class="ui red submit button">등록</button> 
       <div class="or"></div> 
       <div class="ui button" onClick="history.back();">취소</div> 
      </div> 
     </form> 
    </body> 
</html> 
+0

Nếu nó hoạt động trên Fiddle, nhưng không phải trên enviro của riêng bạn, hãy kiểm tra đường dẫn đến nguồn tập lệnh của bạn. – briansol

+0

có thể là một trong các tham chiếu tệp js không được nhận đúng cách trong mã của bạn. –

+0

@briansol Đường dẫn tập lệnh là tốt. Nó được nạp một cách chính xác. – R4T1N4

Trả lời

13

Hãy thử đặt

<script> 
    $('.ui.dropdown').dropdown(); 
</script> 

ngay trước khi bế mạc </body> thẻ. Bạn đang chạy tập lệnh thả xuống trước khi các phần tử này $('.ui.dropdown') thậm chí tồn tại trong DOM do đó không có gì để đính kèm.

+0

Tôi ghét khi 'jQuery' âm thầm chạy các hành động trên không có phần tử –

+0

Cảm ơn bạn rất nhiều! Nó đã giúp tôi rất nhiều! – R4T1N4

+3

Bạn cũng có thể làm '$ (function() {$ ('. Ui.dropdown'). Dropdown();})' và để nó trong đầu –

2

Hãy thử viết nó như thế này:

$(document).ready(function() { 
    $('.ui.dropdown').dropdown(); 
}); 

Kịch bản của bạn là trên đầu trang của các thẻ cơ thể, vì vậy bạn phải kiểm tra xem DOM đã sẵn sàng. Hàm ready() sẽ kiểm tra nếu DOM đã sẵn sàng trước rồi chạy script.

0

Lỗi này cũng xảy ra nếu bạn sử dụng chủ đề tùy chỉnh cho phần tử menu trong bộ sưu tập trong theme.config nhưng không cung cấp tệp ghi đè thực cho các biến và ghi đè trong thư mục chủ đề của bạn - ngay cả khi tệp trống. Không có lỗi js nào hiển thị nhưng menu thả xuống không hoạt động. Đảm bảo bạn có tất cả ghi đè các tệp được cung cấp hoặc chỉ thay thế các phần tử bạn thực sự muốn sử dụng từ chủ đề tùy chỉnh của mình trong theme.config.

Các vấn đề liên quan