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>
答案 0 :(得分:0)
在$('.content').find('li').addClass('red')
之后添加$('.content').append(result);
以下代码段可能对您有所帮助。
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;