页面元素用JS动态添加的有效事件绑定方式

原创
2016/01/19 22:20
阅读数 2.7K
  1. 常规事件绑定方式,直接监听匹配元素事件

    <div id="test1">
    	<input type="button" class="btn" value="按钮1"/>
    	<input type="button" class="btn" value="按钮1"/>
    	<input type="button" class="btn" value="按钮1"/>
    	<p></p>
    </div>
    <input type="button" class="add" value="加一个按钮" />
    <script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
    <script type="application/javascript">
    	$(function(){
    		$('.btn').on('click',function(){
    			alert('绑定有效1')
    		});
    		$('.add').on('click',function(){
    			$('#test1').append('<input type="button" class="btn" value="按钮2"/>')
    		});
    	})
    </script>
  2. 通过监听父级容器下匹配子元素进行事件绑定

    <div id="test1">
    	<input type="button" class="btn" value="按钮1"/>
    	<input type="button" class="btn" value="按钮1"/>
    	<input type="button" class="btn" value="按钮1"/>
    	<p></p>
    </div>
    <input type="button" class="add" value="加一个按钮" />
    
    <script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
    <script type="application/javascript">
    	$(function(){
    		$('#test1').on('click','.btn',function(){
    			alert('绑定有效1')
    		});
    		$('.add').on('click',function(){
    			$('#test1').append('<input type="button" class="btn" value="按钮2"/>')
    		});
    	})
    </script>


展开阅读全文
加载中
点击引领话题📣 发布并加入讨论🔥
打赏
0 评论
0 收藏
1
分享
返回顶部
顶部