Cách chính xác để tự động thêm điều khiển giao diện người dùng ngữ nghĩa?

Question

Tôi đang cố gắng quấn đầu quanh Semantic UI và tôi hiểu cách mọi thứ được kiểm soát bởi lớp bạn cung cấp cho một phần tử DOM, nhưng tôi thực sự không thể làm việc đó khi thêm các phần tử DOM mới động. Dường như javascript ui ngữ nghĩa chỉ chạy trên trang tải đầu tiên chứ không phải trên các phần tử mới khi tôi thêm chúng. Hiện tại, việc này chỉ được thực hiện qua:

$("#target").html("<new elements here>") 

Có cách nào đúng để thực hiện việc này không? Tôi không thể tìm thấy bất kỳ tài liệu nào về điều này trên trang web Giao diện người dùng ngữ nghĩa.

Cập nhật: Để cung cấp một ví dụ tốt hơn ...

Nói rằng tôi có bố trí này:

<div class="right menu" id="rightMenu"> 
    <div class="ui dropdown link item"> 
     Courses 
     <i class="dropdown icon"></i> 
     <div class="menu"> 
     <a class="item">Petting</a> 
     <a class="item">Feeding</a> 
     <a class="item">Mind Reading</a> 
     </div> 
    </div> 
    <a class="item">Library</a> 
    <a class="item">Community</a> 
    </div> 
</div> 

Và mã này được điều hành:

var menu = '<div class="ui dropdown link item"> \ 
    Test \ 
    <i class="dropdown icon"></i> \ 
    <div class="menu"> \ 
    <a class="item" href="http://google.com">Google</a> \ 
    <a class="item" href="http://amazon.com">Amazon</a> \ 
    </div> \ 
</div>'; 

$("#rightMenu").append(menu) 

Các mục trình đơn mới xuất hiện tốt ... NHƯNG nó không thực sự thả xuống như nó nên, cho đến khi tôi chạy này:

$('.ui.dropdown') 
    .dropdown({ 
    on: 'hover' 
    }); 

Sau đó, ứng dụng sẽ mở khi di chuột. Nhưng có cách nào để không phải phải chạy lại mỗi lần?

Answer 1

Có vài cách để thêm các phần tử vào DOM. html (sẽ làm rỗng vùng chứa và sau đó chèn các phần tử mới) là một trong số chúng. Bạn cũng có thể sử dụng append để thêm các phần tử mới vào tập hợp hiện có. Tuy nhiên, vấn đề của bạn là về các sự kiện không được kích hoạt trên các yếu tố được thêm động. Giải pháp cho việc này là sự kiện phái đoàn. Đọc more about it here.

Từ jQuery doc: Sự kiện được ủy có lợi thế mà họ có thể xử lý các sự kiện từ các yếu tố hậu duệ được thêm vào các tài liệu tại một thời điểm sau đó. Bằng cách chọn một yếu tố đảm bảo sẽ có mặt tại thời điểm xử lý sự kiện giao được đính kèm, bạn có thể sử dụng giao các sự kiện để tránh sự cần thiết phải thường xuyên gắn và gỡ bỏ xử lý sự kiện.

Đây là một bản demo nhanh tôi muốn thiết lập về việc thêm các yếu tố mới, sự kiện phân tán, vv Hy vọng điều đó sẽ giúp ích.

var $container = $("#container"); 
 
var count = 3; 
 

 
$container.on("click", 'button', function() { 
 

 
    alert ("You've clicked on " + $(this).text()); 
 
}); 
 

 
$("#addButtons").on("click", function() { 
 

 
    $container.append("<button>Button" + (++count) + "</button>"); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="container"> 
 
    <button>Button1</button> 
 
    <button>Button2</button> 
 
    <button>Button3</button> 
 
</div> 
 

 
<button id="addButtons">Add a few more!</button>

EDIT: Ngay cả đối với động thêm các yếu tố giao diện người dùng Semantic, quy tắc vẫn giống như nó chỉ là một element. Tôi không chắc chắn nếu có vấn đề khác trên trang của bạn. Xem các bản trình diễn được cập nhật bên dưới.

1) Sử dụng append

2) Sử dụng html

EDIT: Vì vậy, đó là cách Semantic UI Thả xuống là nghĩa vụ phải làm việc như thả xuống được tạo ra/render bằng Javascript. Vì vậy, khi lựa chọn mới/Dropdowns được thêm vào các phương pháp có liên quan ($('.ui.dropdown').dropdown({on: 'hover'});) cần phải được tái kích hoạt.Giải pháp khác là thêm lớp simple vào danh sách thả xuống mới được tạo, tức là var menu = '<div class="ui simple dropdown link item"> \ sẽ kích hoạt trình đơn thả xuống khi bạn di chuột qua, nhưng. nó không có hoạt hình!

Hy vọng điều đó sẽ hữu ích.

Answer 2

Bạn có thể đặt cuộc gọi jquery ngữ nghĩa của bạn trong một hàm và gọi nó trong một callback sau một appendTo như

$(menu).appendTo("#rightMenu").each(function() { 
activateSemantics(); 
}); 
function activateSemantics(){ 
    $('.ui.dropdown') 
    .dropdown({ 
     on: 'hover'}); 
} 

Answer 3

Sau khi thêm các yếu tố qua JQuery như LShetty nói, cho thả xuống UI ngữ nghĩa, bạn cần phải khởi tạo nó . Nhưng có vẻ như mối quan tâm của bạn là việc khởi tạo lại các trình đơn thả xuống khác cũng như các cài đặt khác hoặc được thêm vào. Trong trường hợp đó, chỉ cần khởi tạo thêm một menu thả xuống.

Lưu ý rằng nó không phải là trường hợp đối với mọi phần tử giao diện người dùng ngữ nghĩa, có thể chỉ là các phần tử thả xuống và một số phần tử khác.

var menu = '<div class="ui dropdown link item"> \ 
    Test \ 
    <i class="dropdown icon"></i> \ 
    <div class="menu"> \ 
    <a class="item" href="http://google.com">Google</a> \ 
    <a class="item" href="http://amazon.com">Amazon</a> \ 
    </div> \ 
</div>'; 

$("#rightMenu").append(menu) 

menu.find(".ui.dropdown") 
    .dropdown({ 
    on: 'hover' 
    });