如何使用 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"});*/
 });

});