我使用 jQuery .load 函数将模板加载到容器中:
$('#container').load('templates/list.php');
但是当它加载时,它不起作用任何其他jQuery函数。例如,我加载模板:
<a href="#/phone" class="btn btn-primary btn-xs" id="phone_req">OK</a></div>
并添加到我的脚本中.js
$('#phone_req').click(function(){
console.log('Phone');
});
加载后,我单击按钮,但没有任何反应。请告诉我我错在哪里
您需要
使用 .on()
并将事件侦听器添加到父元素的 <a>
标记中。
做这样的事情:
$('#container').on('click','a.btn',function(e){
//do something...
});
阅读更多 这里 动态创建元素的事件绑定? 和这里 jQuery docs .on()
兄弟,你可以试试这个
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
<style type="text/css">
body{
margin:0;
padding:0;
overflow-x:hidden;
}
#container{
width:300px;
height:200px;
border:1px solid;
}
</style>
</head>
<body>
<div id="container"></div>
<a href="#/phone" class="btn btn-primary btn-xs" id="phone_req">OK</a></div>
<script>
$('#container').load('list.php');
$('#phone_req').click(function(){
console.log('Phone');
});
</script>
</body>
</html>