Essayer d'intégrer Jeditable + MarkItUp et Thickbox/Lightbox

Question

J'ai réussi à intégrer MarkItUp avec Jeditable en fonction des instructions sur ces deux sites. Ce que je voudrais vraiment faire, cependant, c'est que la fenêtre d'édition de Jeditable/MarkItUp apparaisse dans une superposition de Thickbox ou de Lightbox. Jusqu'à présent, mes tentatives n'ont pas été couronnées de succès.

Ainsi, en ce moment, je le code standard:

$.editable.addInputType('markitup', { 
    element : $.editable.types.textarea.element, 
    plugin : function(settings, original) { 
     $('textarea', this).markItUp(settings.markitup); 
    } 
}); 

$(".editme").editable("/content/save", { 
    event : 'dblclick', 
    type  : 'markitup', 
    submit : 'OK', 
    cancel : 'Cancel', 
    width  : 640, 
    height : 'auto', 
    tooltip : 'Double-click to edit...', 
    onblur : 'ignore', 
    markitup : mySettings 
}); 

J'ai trouvé d'autres messages ici qui montrent comment déclencher la zone d'édition en cliquant sur un lien plutôt que l'objet lui-même, et J'ai essayé d'intégrer cela avec les appels de Thickbox, en vain.

Apprécierait que quelqu'un me pointe dans la bonne direction. Merci!

Answer 1

Votre problème provient probablement des événements de jeditable et markitup ne sont pas des événements "en direct".

Lorsque vous (ou votre plugin) lie des événements à certains éléments lors du chargement du document, ces événements sont uniquement liés aux éléments qui sont actuellement dans le dom. Si les éléments sont ajoutés au DOM (votre page) plus tard (comme c'est le cas avec les plugins thickbox/lightbox), les événements ne sont pas liés aux nouveaux éléments dom.

La solution à cela, dans des circonstances normales est d'utiliser les événements en direct de jquery. Mais puisque les plugins que vous utilisez (jeditable et markitup) font probablement les liaisons pour vous, vous n'avez pas d'option directe pour lier les événements en direct, vous-même. jquery code d'événement en direct est quelque chose comme ceci:

$('a.cool').live('click',function(){ 
    // Do something cool 
}); 

Dans ce cas, même si l'élément est ajouté au DOM plus tard, il sera toujours l'événement se lié à lui-même.

Votre solution est de soit Google le sujet de jquery en direct pour jeditable & markitup (j'ai fait, mais n'a rien trouvé) ou entrer dans leur code vous-même. Je regardais jeditable et il est trivialement facile là, le code que vous devez changer est:

// Change this: 
$(this).bind(settings.event, function(e) { 
// Into this: 
$(this).live(settings.event, function(e) { 

et vous aurez aussi changer la fonction unbind:

// change this: 
.unbind($(this).data('event.editable')) 
// Into this: 
.die($(this).data('event.editable')) 

Le processus est probablement similaire à markitup. Je n'ai pas regardé.