Jeditable - активировать редактирование X, нажав Y

Я пытаюсь использовать Jeditable как встроенное решение для редактирования.

Поведение по умолчанию (щелчок на элементе для его редактирования) работает очень хорошо, но я хотел бы активировать элемент, щелкнув на другом элементе.

Например, нажатие на a.activateEdit активирует следующий div.edit(очевидно, это должно быть сделано с помощью селекторов jQuery).

Я просмотрел документы Jeditable для этого, но не смог найти правильный синтаксис

FYI, синтаксис Jeditable по умолчанию - это что-то вроде строк:

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

* Изменить: найдено лучшее решение *

Ответы

Ответ 1

Выше код также не совсем корректен. Он вызывает событие click на всех экземплярах Jeditable.

Есть много способов сделать это, и все зависит от вашего HTML, но, например, если у вас есть следующий HTML:

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

Затем вы можете использовать следующий 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");
});

Ответ 2

Вы можете поместить этот код в функцию щелчка другого элемента. Пример:

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

Ответ 3

Хорошо, Ответ Ata не совсем сработал, но он установил меня по правильному пути:

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

Ответ 4

Я объединил полномочия предыдущих двух ответов, чтобы настроить следующий редактируемый элемент следующим образом:

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