2008-12-14 5 views
14

Tôi đang cố gắng sử dụng Jeditable làm giải pháp chỉnh sửa nội dòng.Có thể chỉnh sửa - Kích hoạt chỉnh sửa X bằng cách nhấp vào Y

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 *

+0

Tôi biết câu hỏi của bạn đã được hỏi một lúc nhưng tôi hiện đang cố gắng triển khai một cái gì đó rất giống nhau. Tôi có nó làm việc với các nhấp chuột của một liên kết, nhưng là có một cách để loại bỏ các sự kiện click của phần tử bạn muốn chỉnh sửa? Nói cách khác, chỉ làm cho phần tử có thể chỉnh sửa, có thể chỉnh sửa từ liên kết chứ không phải khi bạn nhấp vào phần tử đó một cách cụ thể? Cảm ơn. –

+0

Bạn có thể thử unbind() để xóa ràng buộc sự kiện nhấp chuột cho đối tượng đó. – yoavf

+0

Xin lỗi nhưng bạn có thể cung cấp một số mã không? Tôi khá mới mẻ với điều này. Liệu unbind() có nằm trong .editable (url, {}) ;? –

Trả lời

24

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"); 
}); 
+3

Cần lưu ý rằng trong một số ngữ cảnh, '$ (this) .prev()' có thể không nhất thiết phải là phần tử bạn thực sự muốn đặt chế độ có thể chỉnh sửa. (Trong ví dụ này, mặc dù, nó là.) Nó có lẽ bền hơn để chọn '$ (" # unique_id ")' hoặc '$ (". Chỉnh sửa [id = 'unique_id'] ")' để đảm bảo bạn đang chỉnh sửa phần tử bên phải. – pjmorse

+0

Điều đó thật tuyệt vời. Tôi chỉ cần sử dụng kích hoạt ('click') vì vậy tôi không phải thiết lập một kích hoạt đặc biệt và tôi đã có một cái gì đó chức năng khác thiết lập để kick off trên nhấp chuột là tốt. Nhưng đây chính xác là những gì tôi cần. – Jake

+1

@Mika, làm cách nào để chỉnh sửa nhiều trường bằng cách sử dụng plugin Jeditable, chỉ tìm thấy chính tôi trong một tình huống mà tôi cần chỉnh sửa nhiều trường và xác thực với nhau. –

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'); 
}); 
}); 
2

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(); 
    }); 
}); 
1

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(); });