如何使用 jquery ajax 將 css 樣式添加到動態加載的代碼段

Question

var loc="/blah/blaah.html"

$.ajax({

   url: 'xyz.php',
   type: 'POST',
   success:function()
           {
              $('#mydiv').load(loc);
           }
 )}

xyz.php正在以以下格式創建一個 html 片段文件：-

<li id='messagebody'> <ul> <li><img src="abc.jpg" width="42" height="42"></li> <li id='content'>asdjkshadjhasdjjasdhjas</li> <li>21 Aug 20013</li> </ul> </li>

我在.load嘗試過回調：-

$('#mydiv').load(loc,
             function(){
                      $('li#content').css({'overflow':'hidden'});
            });

並嘗試通過生成具有樣式屬性的代碼段來嘗試：-

<li id='messagebody'> <ul> <li><img src="abc.jpg" width="42" height="42"></li> <li id='content' style='overflow:hidden;'>asdjkshadjhasdjjasdhjas</li> <li>21 Aug 20013</li> </ul> </li>

上述方法均無效，但是當我在瀏覽器中檢查元素時，它顯示了添加到所需列表元素 (li#content) 的樣式。我正在為 div 使用 jscrollpane 這是否會產生問題？

Answer 1

試試這個

$.ajax({
    url:  'xyz.php',
    method: 'post',
    success: function(response)
    {
        $('#mydiv').append(response);
    }
}).done(function(){
   $('#content').css('overflow', 'hidden');

});

附帶說明一下，我會避免在 HTML 屬性上混合單引號和雙引號

Answer 2

您可以使用 jQuery .done()方法，並將函數作為回調傳遞給那里。 並在該函數中向元素添加一個類。 這比添加內聯樣式要好。

Answer 3

是 jScrollPane 防止溢出被隱藏。 我發現的解決方案是通過設置 jScrollPane 元素的contentWidth: 0px 。

Answer 4

正確的方法是使用函數（數據）參數調用 .load，然后將其包裝在 Object 中並將其作為純 HTML 吐出並將其附加到 div 中。 比添加任何 css 或任何您喜歡的代碼作為它現在的純 html 並正確插入到 DOM 中。

     $(document).ready(function(){

$('#template').load('http://localhost/site root/site folder/index.html 
 section#togo', function(template) {
 var obj = $(this).find('section#togo'), html = obj.html(); 
 $(this).append($('<div>').text(html)); 
 $('div[id^="menu"]').css({display: "block"}); 
/*$('#menu1').css({display: "block"});*/
 });

});