尝试集成Jeditable+MarkItUp和Thickbox/Lightbox

Question

根据这两个站点上的说明，我已经成功地将MarkItUp与Jeditable集成在一起。然而，我真正想做的是让Jeditable/MarkItUp编辑窗口出现在Thickbox或Lightbox覆盖中。到目前为止，我这样做的尝试还没有成功。

所以，现在，我有了标准代码：

$.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
});

我在这里找到了其他帖子，展示了如何通过单击链接而不是对象本身来触发编辑框，我尝试将其与Thickbox调用集成在一起，但都无济于事。

希望大家能给我指个方向。谢谢!

Answer 1

您的问题可能源于jeditable和markitup事件不是“实时”事件。

当您(或您的插件)在文档加载时将事件绑定到某些元素时，这些事件仅绑定到当前在dom中的元素。如果这些元素后来被附加到DOM (您的页面)中(就像thickbox/lightbox插件那样)，那么事件就不会绑定到新的dom元素。

在正常情况下，解决这个问题的方法是使用jquery的实时事件。但是由于您正在使用的插件(jeditable和markitup)可能会为您执行绑定，因此您没有直接的选项来自己绑定活动。jquery活动代码通常是这样的：

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

在这种情况下，即使稍后将元素添加到DOM，它仍然会获得绑定到自身的事件。

您的解决方案是要么在Google上搜索jquery live for jeditable & markitup的主题(我找到了，但什么也没找到)，要么自己去研究他们的代码。我研究了jeditable，它非常简单，你需要修改的代码是：

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

您还必须更改unbind函数：

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

这个过程可能类似于标记。我没有看一眼。