jquery中ajax加载的h1或h2元素的样式不工作

Styling to h1 or h2 element loaded by ajax in jquery not working

本文关键字：元素 样式 工作 h2 h1 ajax 加载 jquery      更新时间：2023-09-26

我试图通过点击两个不同的链接加载视图文件，这些视图文件有h1和h2标签，我想从一个地方处理他们的风格。

Index file
--------------------------------
<div id='contentDiv' style="background:#98bf21; height:200px; width:800px;  position:absolute; left:-100%; "> </div>
--------------------------------

索引文件加载头文件

header file
--------------------------------
<li><a class='ajaxLoad' id='ajaxLoad1' href="link1" >First File</a></li>
<li><a class='ajaxLoad' id='ajaxLoad2' href="link2" >Second File</a></li>

<script>    
$(document).ready(function(){       
contDiv = $('#contentDiv');
$('a.ajaxLoad').on('click', function(e){
var href = $(this).attr('href'), position = '100px';
  e.preventDefault();
contDiv.css('left','-100%');
contDiv.animate({left: position});
var loadDoc = contDiv.load(href);
var getDivId = '#'+loadDoc[0].id;
var getChild = $(getDivId).children().css({'color':'red'});
 });
 });
</script>
--------------------------------

将外部文件加载到索引文件中的contentDiv。

文件一包含

这是文件1

文件二包含

文件2

我想获得加载文件的内容和样式，但是我得到这个

[prevObject: e.fn.init[1]]

jQuery的load方法是异步的，所以你必须在完成时使用回调来处理它:

$(document).ready(function(){       
  contDiv = $('#contentDiv');
  $('a.ajaxLoad').on('click', function(e){
var href = $(this).attr('href'), position = '100px';
e.preventDefault();
contDiv.css('left','-100%');
contDiv.animate({left: position});
// Changed code here
contDiv.load(href, function() {
  contDiv.children().css({'color':'red'});
});
// Changed code ends
   });
 });

相关文章：