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問題

回答

相關問題