jQuery .on()方法不适用于追加dom

时间:2017-08-26 21:54:30

标签: javascript jquery html

jQuery .on()方法适用于“click”事件,但它不适用于“load”。

如何在ajax加载后将类添加到新的dom?我无法编辑$('。nav a')click function(),它在另一个js文件中,这是我的代码:

<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script>
$(function() {
	$('.nav a').click(function(){
		var nav  = $(this).attr('href').replace('#',''); 
		$.post(nav + ".html",function(result){
			$('.content').append(result); //result: <li> A </li> <li> B </li>
		});
		return false;
  });

  // it works
	$('body').on('click', 'li', function() {
		$(this).addClass('red');
	})

  // doesn't work 
  $('body').on('load', 'li', function() {
		$(this).addClass('red');
  })

})
</script>
<style>.red{color:red} </style>
</head>
<body>
<ul class="nav">
    <li><a href="#about">about</a></li>
    <li><a href="#contact">contact</a></li>
</ul>
<div class="content"> </div>
</body>
</html>

1 个答案:

答案 0 :(得分:0)

$('.content').find('li').addClass('red')之后添加$('.content').append(result);以下代码段可能对您有所帮助。

&#13;
&#13;
var nav = $('#nav');
var result = `<li> A </li> <li> B </li>`;
$('#myBtn').click(function() {
		nav.append(result);
    nav.find('li').addClass('red');
});
&#13;
.red{
  color: red;
}
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="myBtn">
  Attach DOM
</button>
<ul id="nav">

</ul>
&#13;
&#13;
&#13;