Làm thế nào để có được chọn phần tử trong danh sách thả xuống bootstrap, nơi thả xuống là tự động dân cư

Question

này tương tự như How to Display Selected Item in Bootstrap Button Dropdown Title

Chỉ khác biệt, danh sách thả xuống của tôi không phải là tĩnh và nó được phổ biến thông qua phản ứng ajax. Dưới đây mã không chỉ hoạt động cho<li> các mục được điền động.

Để kiểm tra ở trên, tôi cố ý đặt một static <li> khi tôi nhấp vào mục đó, tôi có thể thấy thông báo thành công trong bảng điều khiển. Nhưng, khi tôi nhấp vào <li> được thêm vào động, tôi không nhận được bất cứ điều gì trong giao diện điều khiển.

Tôi tin rằng, có một số kiến ​​thức cơ bản về jQuery mà tôi thiếu ở đây. jQuery rất kinh nghiệm, ý kiến ​​/ suy nghĩ?

Dưới đây là một số mã để làm rõ thêm.

Java Mã Script:

In ấn chọn tùy chọn trong giao diện điều khiển

$(".dropdown-menu li a").click(function() { 
     console.log("Selected Option:"+$(this).text()); 
}); 

Populating thả xuống từ phản ứng JSON ajax

$.each(response, function (key, value) { 
    $("#dropDownUL").append("<li> <a tabindex=\"-1\" href=\"#\" align=\"left\"> " + value + "</a> </li>"); 
}) 

HTML code:

<div class="dropdown btn"> 
    <div id="dropDownId" class="dropdown-toggle" id="dLabel" role="button" data-toggle="dropdown" data-target="#"> 
     Collections 
     <b class="caret"></b> 
    </div>   
    <ul id="dropDownUL" class="dropdown-menu pull-left" role="menu" aria-labelledby="dLabel"> 
    <li><a tabindex="-1" href="#" align="left">Static test Option</a></li> 
    </ul> 


</div> 

Vì vậy, , Một lần nữa, nếu tôi bấm vào Static test Option tôi có thể nhìn thấy thông báo trong giao diện điều khiển: Selected Option: Static test Option

Tuy nhiên, khi tôi bấm vào Option2Option 3 đó là dân cư từ phản ứng ajax, tôi không thấy bất cứ điều gì trong giao diện điều khiển.

Hãy cho tôi biết nếu có điều gì đó không rõ ràng. Tôi sẽ cố gắng giải thích thêm.

Answer 1

$(document).on('click', '.dropdown-menu li a', function() { 
    console.log("Selected Option:"+$(this).text()); 
}); 

Đây chỉ là đoàn sự kiện đơn giản ... Các yếu tố đó không hề tồn tại tải trang phải có sự kiện giao cho một yếu tố phụ huynh tĩnh không tồn tại tải trang.

Chúng tôi sử dụng jQuery's .on() để hoàn tất việc này.

$(staticElement).on(event, dynamicElement, function(){ //etc }); 

bắt buộc Sửa

Xin đừng thực sự ràng buộc yếu tố để các $(document) và thay vì chọn các yếu tố cha mẹ gần gũi nhất đó là tĩnh. Đây là vì lý do hiệu suất.