jScrollPane jEditable DOM 问题

Question

我遇到了一个奇怪的问题。

这是我的代码。我运行 getJSON() 从 PHP 中获取信息，该信息从数据库中提取，然后用结果填充 div。我有 jScrollPane 和 jEditable，因此用户可以向下滚动并单击以编辑任何内容。它有时起作用，然后不起作用，这让我想知道浏览器是否没有正确解释代码，或者我是否误解了这里的基本 DOM 概念......

$().ready(function() {
    $('#pane1').jScrollPane();
    $('#tab_journal').tabs();

    $('#tab2').load("/journal_new.php");

    var i=0;
    var row = '';
    var k, v, dt;

    $.getJSON("/ajax.php?j=22", function(data) {
        row = '<p>';
        while(i<data.length) {
            $.each(data[i], function(k, v) {
                if (k == 'subject') {
                    row += '<div style="font-size:1.5em; color:#000000;"><div class="editable" style="width:705px;" id="title-'+data[i].id+'">'+v+'</div></div>posted: '+dt+'<br />';
                } else if (k == 'dt') {
                    dt = v;
                } else if (k == 'msg') {
                    row += '<div class="editableMsg" style="width:705px; height:40px;" id="msg-'+data[i].id+'">'+v+'</div></p>';
                }
            });
            i++;
        }
        $('#pane1').append(row).jScrollPane({scrollbarWidth:10, scrollbarMargin:10, showArrows:true});
    });

    $('.editable').livequery(function () {
        $('.editable').editable("/savejournal.php", {
            submitdata : function() {
            },
            tooltip   : 'Click to edit',
            indicator : '<img src="/UI/images/indicator.gif">',
            cancel    : 'Cancel',
            submit    : 'OK'
        });
        $('.editableMsg').editable("/savejournal.php", {
            submitdata : function() {
            },
            tooltip: 'Click to edit',
            indicator : '<img src="/UI/images/indicator.gif">',
            cancel    : 'Cancel',
            submit    : 'OK',
            type      : 'textarea'
        });
        $(".editable,.editableMsg").mouseover(function() { $(this).css('background-color', '#FDD017'); });
        $(".editable,.editableMsg").mouseout(function() { $(this).css('background-color', '#fff'); });
    });
});

然后是 HTML：

<div id="tab_container" style="margin:0px 0px 2px 8px;">
    <ul id="tab_journal">
        <li><a href="#tab1"><span>View / Edit</span></a></li>
        <li><a href="#tab2"><span>New Entry</span></a></li>
    </ul>
</div>
<div id="tab1" style="margin:0px 0px 0px 8px;">
    <div id="pane1" class="scroll-pane super-wide"></div>
</div>
<div id="tab2" style="margin:0px 0px 0px 8px; width:700px;"></div>

谢谢世界。

Answer 1

已经无法破解了。似乎代码行：

$('#tab2').load("/journal_new.php");

并没有让浏览器满意。