Làm cách nào để lấy phần tử invoker của Twitter Bootstrap Modal?

Question

Tôi đã có một yếu tố a cho cách gọi phương thức:

<a class="btn" data-toggle="modal" data-target="#myModal" href="http://some-url" >Launch Modal</a> 

Và, nói rằng đây là phương thức của tôi:

<div class="modal hide" id="myModal"> 
    <div class="modal-header"> 
    <button type="button" class="close" data-dismiss="modal">×</button> 
    <h3>Modal header</h3> 
    </div> 
    <div class="modal-body"> 
    <p>One fine body…</p> 
    </div> 
    <div class="modal-footer"> 
    <a href="#" class="btn" data-dismiss="modal">Close</a> 
    <a href="#" class="btn btn-primary">Save changes</a> 
    </div> 
</div> 

tôi có thể liên kết các chức năng với các sự kiện bị sa thải bởi phương thức:

$('#myModal').on('hidden', function() { 
    // do something… 
}) 

Câu hỏi của tôi là: Làm cách nào tôi có thể truy cập vào phần tử a -những gì đã gọi phương thức - từ chức năng người đăng ký sự kiện của tôi?

Answer 1

Nó đã được giải quyết trong Bootstrap 3.0.0 nhờ event.relatedTarget.

$('#your-modal').on('show.bs.modal', function (e) { 
    var $invoker = $(e.relatedTarget); 
}); 

Answer 2

Hiện tại, nó không có sẵn ngoài hộp. Có một yêu cầu tính năng cho nó và một work-around nếu bạn muốn tự mình chỉnh sửa mã bootstrap-modal.

Xem here

Answer 3

tôi đã có một tình huống mà tôi đã để ràng buộc một số dữ liệu liên quan đến việc "Invoker", giống như bạn nói. tôi đã quản lý để giải quyết nó bằng cách gắn một sự kiện "click" vào nó và làm việc với các dữ liệu như thế này:

Các Invoker

<img id="element" src="fakepath/icon-add.png" title="add element" data-toggle="modal" data-target="#myModal" class="add"> 

Các JS để bắt dữ liệu liên quan đến Invoker (Chỉ một số ví dụ về mã)

$('#element').on('click', function() { // Had to use "on" because it was ajax generated content (just an example) 
    var self = $(this); 
}); 

Như thế này, bạn có thể xử lý dữ liệu liên quan đến người gọi của mình dù bạn muốn.

Answer 4

Bạn cần phải nghe:

$('[data-toggle="modal"]').on('click', function() { 
    $($(this).attr('href')).data('trigger', this); 
}); 
$('.modal').on('show.bs.modal', function() { 
    console.log('Modal is triggered by ' + $(this).data('trigger')); 
}); 

Bạn có thể thay thế tất nhiên show.bs.modal với shown.bs.modal hoặc bất kỳ sự kiện khác mà họ sa thải. Lưu ý rằng đây là dành cho Bootstrap 3.0.0. Nếu bạn đang sử dụng 2.3.2, bạn cần phải loại bỏ .bs.modal (Tôi nghĩ).

Điều tôi thích về giải pháp này: bạn không cần phải nhớ ai là , tự, rằng và các giải pháp proxy khác.

Tất nhiên, bạn phải kiểm tra xem thuộc tính href không phải là một liên kết thực (tùy chọn tải phương thức động).

Answer 5

Phần tử phương thức có đối tượng dữ liệu có tên modal để lưu tất cả các tùy chọn được chuyển. Bạn có thể đặt thuộc tính dữ liệu 'nguồn' trên phần tử kích hoạt phương thức, đặt nó thành ID của nguồn và sau đó truy xuất thuộc tính sau từ biến số options.

Trigger sẽ là:

<a id="launch-modal-1" class="btn" data-toggle="modal" data-target="#myModal" href="http://some-url" data-source="#launch-modal-1">Launch Modal</a> 

Trong callback sự kiện, nhận đối tượng modal dữ liệu, và nhìn vào source tùy chọn:

$('#myModal').on('hidden', function() { 
    var modal = $(this).data('modal'); 
    var $trigger = $(modal.options.source); 
    // $trigger is the #launch-modal-1 jQuery object 
});