sự kiện nhấp chuột jquery không kích hoạt khi sử dụng loại trực tiếp

Question

Theo knockout click binding documentation's "Note 3", Knockout ngăn sự kiện nhấp chuột thực hiện chức năng mặc định. Để ghi đè hành vi này, tất cả những gì tôi phải làm là trả về true từ hàm xử lý của tôi. Vì vậy, tôi có dấu sau:

<div data-bind="visible:Pages().length == 0"> 
    <div class="alert alert-info">Click "Parse" button.</div> 
    <button class="btn" id="btnParse" title="Parse Tabs">Parse</button> 
</div> 

Bây giờ, tôi muốn đính kèm một sự kiện click vào nút như thế này:

$(function() {  
    $('#btnParse').on('click', function() { alert('clicked'); return true;}); 
}); 

Lưu ý rằng tôi đang trở về đúng với chức năng. Điều này thậm chí xử lý không bao giờ cháy. Làm thế nào tôi có thể thực hiện công việc này?

Answer 1

Ghi chú bạn đề cập đến cho liên kết nhấp chuột đề cập đến phương thức trong chế độ xem của bạn, không phải cho trình xử lý nhấp chuột tùy chỉnh của bạn.

Nói cách khác, nếu bạn có một data-bind="click: doSomething" trong phần tử <button>, phương thức doSomething() trong chế độ xem của bạn sẽ trả về true nếu bạn muốn nó thực thi trình xử lý tùy chỉnh của bạn.

Answer 2

Trong trường hợp của tôi, tôi đã làm việc với một ObservableArray cần một số phép thuật jQuery được áp dụng cho từng mục trong mảng đó. Tôi đã có một số vấn đề với các ràng buộc tùy chỉnh không muốn mất hai varibles từ mỗi mục trong mảng đó. Vì vậy, trong bao bì của tôi, tôi đã thêm vào một số vật tối màu đó cho một vật không thể quan sát được như một chức năng sao cho khi cái tên được nối, thì bản đồ tôi đang làm sẽ di chuyển đến vị trí đó.

HTML:

<ul data-bind="foreach: filteredItems"> 
    <li class="seat"> 
     <span class="name" data-bind="text:fullName, click: toggleEmp"></span> 
    </li> 
</ul> 

Mã sản phẩm:

function viewModel() { 
    var vm = this; 
    vm.empData = function(data) { 
     var emp = this; 
     emp.office_x_loc = ko.observable(data.xLoc); 
     emp.office_y_loc = ko.observable(data.yLoc); 
     emp.toggleEmp = function() { 
      jQuery('#skyLineMap').lhpMegaImgViewer('setPosition', emp.office_x_loc(),emp.office_y_loc(), 0.8, false); 
    };//*/ 
}//*/ 

Tôi hy vọng điều này sẽ giúp

Answer 3

Tôi nghĩ rằng vấn đề đã làm với sửa đổi loại trực tiếp của DOM nơi bạn đang cố gắng để ràng buộc biến cố. Để giải quyết vấn đề này, hãy thử gán hàm click cho phần tử cha <div>. Khi chỉ định trình xử lý nhấp chuột, hãy sử dụng quá tải với bộ chọn để chỉ định rằng bạn muốn xử lý lần nhấp chỉ khi nút được chứa được nhấp. Ví dụ, thay đổi div như thế này:

<div id="btnContainer" data-bind="visible:Pages().length == 0"> 
    <div class="alert alert-info">Click "Parse" button.</div> 
    <button class="btn" id="btnParse" title="Parse Tabs">Parse</button> 
</div> 

Và sau đó thay đổi kịch bản của bạn:

$(function() {  
    $('#btnContainer').on('click', '#btnParse', function() { alert('clicked');}); 
}); 

Lưu ý rằng nếu <div> này được chứa trong một khối logic mà sửa đổi DOM, (a template, foreach vòng lặp, vv), có thể bạn sẽ cần phải đặt thẻ #btnContainer cho tổ tiên đầu tiên của <button> không phải là một phần của khối lôgíc như vậy.

Answer 4

Lý do khiến trình xử lý nhấp của bạn không bao giờ kích hoạt vì nó không bao giờ được áp dụng cho phần tử của bạn. Vì vậy, khi bạn làm điều này trong jquery:

$('.some-class').on('some-event', someFunction); 

Sau đó cho handler bị ràng buộc để sự kiện đó, đầu tiên jQuery có để tìm chọn $('.some-class') của bạn. Trong trường hợp của bạn, rất có thể #btnParse chưa được hiển thị cho trang bằng loại trực tiếp khi bạn ràng buộc sự kiện. Hoặc, cũng có thể, phần tử gốc đó được trả về, bị phá hủy và sau đó một phần tử khác được trả về. Trong kịch bản thứ hai này, trình xử lý sự kiện sẽ không còn trên nút.Một thay thế (mà tôi không khuyên bạn nên) là để ràng buộc xử lý cao hơn trong DOM, như ở cấp document, và lọc các sự kiện để chỉ những cái gì đó với một id #btnParse:

$(document).on('click', '#btnParse', function() { console.log('hi'); }); 

Lý do tôi không khuyên bạn nên thực hiện vì đó là thực hành loại trực tiếp xấu, bạn nên sử dụng ràng buộc click như một số bài đăng khác được đề xuất. Ngoài ra, bạn đang sử dụng thuộc tính id và đó thực sự không phải là một ý tưởng hay nói chung về nội dung động được tạo khuôn mẫu - chỉ cần sử dụng các lớp trừ khi bạn hoàn toàn cần id cho phần tử tĩnh duy nhất.

Đối với cách sử dụng đúng cách ràng buộc nhấp chuột của loại trực tiếp, một điều khó khăn là bạn sẽ cần phải hiểu cách loại bỏ phạm vi. Nếu, ví dụ, bạn đang ràng buộc một nhấp chuột bên trong một vòng lặp, và bạn muốn xử lý từ mô hình giao diện chính, bạn phải tham khảo phạm vi phụ huynh vì vòng lặp thay đổi ngữ cảnh của bạn:

<!-- ko foreach: someCollection --> 
    <a data-bind="click: $parent.someFunction"></a> 
<!-- /ko --> 

Hơn nữa, nếu bạn cần thay đổi bối cảnh Javascript mà xử lý của bạn thực hiện với (các this), sau đó bạn cần phải ràng buộc xử lý nhấp chuột như thế này:

<!-- ko foreach: someCollection --> 
    <a data-bind="click: $parent.someFunction.bind($parent)"></a> 
<!-- /ko --> 

Chơi với thứ mà một chút và đặt một câu hỏi mới nếu bạn vẫn còn bối rối. Chúc may mắn!