Có thể chỉnh sửa - Kích hoạt chỉnh sửa X bằng cách nhấp vào Y

Question

Tôi đang cố gắng sử dụng Jeditable làm giải pháp chỉnh sửa nội dòng.

Hành vi mặc định (nhấp vào yếu tố để chỉnh sửa) hoạt động khá tốt, nhưng tôi muốn kích hoạt phần tử bằng cách nhấp vào yếu tố khác.

Ví dụ nhấp vào a.activateEdit sẽ kích hoạt div.edit tiếp theo (rõ ràng nên được thực hiện bằng cách sử dụng bộ chọn jQuery).

Tôi đã nhìn vào tài liệu Jeditable cho điều này, nhưng không thể tìm đúng cú pháp

FYI, cú pháp Jeditable mặc định là một cái gì đó dọc theo dòng:

$(document).ready(function() { 
    $('.edit').editable('http://www.example.com/save.php'); 
}); 

* Chỉnh sửa: được tìm thấy a better solution *

Answer 1

Trên mã không hoàn toàn chính xác. Nó kích hoạt sự kiện click trên tất cả các thể hiện Jeditable.

Có rất nhiều cách để làm điều đó và tất cả phụ thuộc vào HTML của bạn, nhưng ví dụ nếu bạn đã sau HTML:

<div class="edit" id="unique_id">Editable text</div> 
<a href="#" class="edit_trigger">Edit me!!</a> 

Sau đó, bạn có thể sử dụng sau đây JavaScript:

/* Bind Jeditable instances to "edit" event. */ 
$(".edit").editable("http://www.example.com/save.php", { 
    event  : "edit" 
}); 
/* Find and trigger "edit" event on correct Jeditable instance. */ 
$(".edit_trigger").bind("click", function() { 
    $(this).prev().trigger("edit"); 
}); 

Answer 2

Bạn có thể đặt mã này vào chức năng nhấp của một phần tử khác. Ví dụ:

HTML:

<a class="clickme">Click me to edit</a> 
<div class="edit">Edit Me!</div> 

jQuery:

$(document).ready(function() { 
$("a.clickme").click(function(){ 
    $('.edit').editable('http://www.example.com/save.php'); 
}); 
}); 

Answer 3

Ok, Ata's answer không hoàn toàn làm việc nhưng nó đã đặt cho tôi trên con đường đúng đắn:

$(document).ready(function() { 
    $('.edit').editable('http://www.example.com/save.php'); 
    $("a.clickme").click(function(){ 
      $('.edit').click(); 
    }); 
}); 

Answer 4

tôi đã kết hợp sức mạnh của hai câu trả lời trước đó để nhắm mục tiêu phần tử có thể chỉnh sửa tiếp theo như vậy:

/* Find and trigger "edit" event on next Jeditable instance. */ $(".edit_trigger").livequery('click', function() { $(this).next().click(); });