加载模板 jQuery 后脚本不起作用



我使用 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>

最新更新