jquery - 尝试整合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 的事件不是“实时”事件。

当您(或您的插件)在文档加载时将事件绑定(bind)到某些元素时，这些事件仅绑定(bind)到当前在 dom 中的元素。如果元素稍后被附加到 DOM(您的页面)(如厚盒/灯箱插件的情况)，事件不会绑定(bind)到新的 dom 元素。

解决这个问题的方法，一般情况下是使用jquery的live events。但由于您使用的插件(jeditable 和 markitup)可能会为您进行绑定(bind)，因此您没有直接的选项来亲自实时绑定(bind)事件。 jquery 实时事件代码通常是这样的:

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

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

您的解决方案是要么 Google 搜索 jquery live for jeditable & markitup 主题(我做了但没有找到任何内容)，要么自己查看他们的代码。我查看了 jeditable，它非常简单，您需要更改的代码是:

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

并且您还必须更改取消绑定(bind)功能:

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

该过程可能类似于标记。我没看。