jScrollPane jEditable DOM问题

我有一个时髦的问题。jScrollPane jEditable DOM问题

这是我的代码。我运行getJSON（）来从PHP中获取来自DB的信息，并用结果填充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>

感谢世界。

来源

2010-04-27 kom

你在测试什么浏览器？我无法让你的例子在Chrome中失败。 – Alex 2010-04-27 22:07:36

我不知道是否$（'＃tab2'）。load（“/ journal_new.php”）;正在影响这个问题 – kom 2010-04-28 01:36:18

已经无法打破。似乎这行代码：

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

没有使浏览器开心。

来源

2010-04-28 22:47:23 kom

jScrollPane jEditable DOM问题

回答

相关问题