尝试集成Jeditable + MarkItUp和Thickbox / Lightbox

时间:2010-03-18 21:27:08

标签: jquery jeditable markitup

我已成功地根据这两个网站上的说明将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调用集成,但无济于事。

感谢任何指点我正确方向的人。谢谢!

1 个答案:

答案 0 :(得分:2)

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

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

解决方案,在正常情况下是使用jquery的直播活动。但是,由于你正在使用的插件(jeditable和markitup)可能正在为你做绑定,你没有直接选择自己绑定事件。 jquery live event code通常是这样的:

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

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

你的解决方案是谷歌jquery的主题为jeditable& markitup(我做了但没有找到任何东西)或自己进入他们的代码。我看着jeditable并且在那里很容易,你需要改变的代码是:

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

您还必须更改解除绑定功能:

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

这个过程可能类似于markitup。我没看。