2008-12-14 12 views
14

Próbuję użyć Jeditable jako wbudowanego rozwiązania do edycji.Jeditable - Aktywuj edycję X, klikając Y

Domyślne zachowanie (kliknij element, aby go edytować) działa całkiem dobrze, ale chciałbym aktywować element, klikając inny element.

Na przykład kliknięcie na a.activateEdit aktywuje następny plik div.edit (oczywiście należy to zrobić za pomocą selektorów jQuery).

Przyjrzeliśmy się Jeditable Dokumenty na to, ale nie mógł znaleźć właściwą składnię

FYI, domyślnie składnia Jeditable jest coś wzdłuż linii:

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

* edit: Znaleziono a better solution *

+0

Wiem, że twoje pytanie zostało zadane jakiś czas temu, ale obecnie próbuję wprowadzić coś bardzo podobnego. Pracuję z kliknięciem linku, ale czy istnieje sposób na usunięcie zdarzenia kliknięcia elementu, który chcesz edytować? Innymi słowy, czy tylko edytowalny element można edytować za pomocą linku, a nie po jego kliknięciu? Dzięki. –

+0

Możesz spróbować usunąć polecenie bind(), aby usunąć powiązanie zdarzenia kliknięcia dla tego obiektu. – yoavf

+0

Przepraszamy, ale czy możesz podać kod? Jestem całkiem nowy w tym. Czy unbind() byłoby w .editable (url, {}) ;? –

Odpowiedz

24

Above kod również nie jest poprawny. Wywołuje zdarzenie click na WSZYSTKICH wystąpieniach Jeditable.

Istnieje wiele sposobów, aby to zrobić i to wszystko zależy od kodu HTML, ale na przykład jeśli następujący kod HTML:

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

Następnie można użyć następującego 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

Warto zauważyć, że w niektórych kontekstach '$ (this) .prev()' niekoniecznie jest elementem, który rzeczywiście chcesz ustawić tryb edytowalny na. (W tym przykładzie jest.) Prawdopodobnie bardziej trwały jest wybór '$ (" # unique_id ")' lub '$ (" edit [id = 'unique_id'] ")', aby upewnić się, że edytujesz odpowiedni element. – pjmorse

+0

To świetnie. Po prostu użyłem spustu ("kliknięcie"), więc nie musiałem ustawiać specjalnego spustu i miałem też inne funkcje, które uruchamiałyby się po kliknięciu. Ale to było dokładnie to, czego potrzebowałem. – Jake

+1

@Mika, jak edytować wiele pól za pomocą wtyczki Jeditable, po prostu znalazłem siebie w sytuacji, w której muszę edytować wiele pól i walidować się ze sobą. –

2

Możesz umieścić ten kod w funkcji kliknięcia innego elementu. Przykład:

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 nie dość pracy, ale nie postawił mnie na właściwą drogę:

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

I Połączyłem moce poprzednich dwóch odpowiedzi, aby skierować następny edytowalny element:

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

Powiązane problemy