Home >Web Front-end >JS Tutorial >Solution to the problem that elements dynamically loaded by js/jq cannot be monitored
This article introduces the solution for the dynamically added elements of js/jq that cannot trigger binding events. If the jquery version is between 1.3-1.8, the solution for the dynamically added elements of js/jq to trigger binding events.
Please take a look at your version and get the answer:
jquery1.6 and below do not support on delegate events
jquery1.3 Live delegation events are supported up to jQuery1.8 version
jquery1.9 and later versions do not support live delegation events, but on events can replace live
jquery1.3 and below (excluding jquery1 .3), it’s time to update your jquery version. Because No solution, no solution, no solution, no solution, no solution, no solution
If the jquery version is between 1.3-1.8, the element dynamically added by js/jq triggers the solution to the binding event Method (it is not recommended to use the on event, because the on event is not supported below version 1.6, and an error will be reported)
click例子
$('element').live('click',function(){})
element可以是动态生成的元素，可以是它的类或者idIf the jquery version is 1.9 or higher, the live delegate event is removed, and it is done through on accomplish. Solution to the binding event triggered by elements dynamically added by js/jq
Note Note: If the page has both a low version of jq (1.3-1.8) and a high version of jq ( jquery 1.9 or above), the live delegate event will be removed by higher versions. In the end, even though the jquery version is between 1.3-1.8, if the live event is used, the page will report an error.
click例子
$('父元素').on('click', '子元素', function(){})The element dynamically loaded at this time must be inside $('parent element'), otherwise the binding event will fail. In other words, the A element should be bound, but the A element is dynamically generated, so jq should get the parent element of the A element to monitor whether a click event occurs on the A element.
For example
<!DOCTYPE html>
<html>
<head>
<title>js/jq 动态添加的元素不能触发绑定事件解决方案</title>
</head>
<script src="https://cdn.bootcss.com/jquery/1.9.0/jquery.js"></script><body>
<button>添加a标签</button>
<p class="a-Box">
<a href="javascript:;" class="alt">My name is</a><br>
</p>
</body>
</html>
<script type="text/javascript">
$('.a-Box').on('click', 'a', function(){
alert('Jachin');
})
$('button').click(function(){
$('p').append('<a href="javascript:;" class="alt">My name is</a><br>');
})
</script>This can perfectly solve the problem that dynamically loaded elements cannot be monitored.
Finally attach a version of jquery
<script src="https://cdn.bootcss.com/jquery/1.2.3/jquery.js"></script> <script src="https://cdn.bootcss.com/jquery/1.2.6/jquery.js"></script> <script src="https://cdn.bootcss.com/jquery/1.3.0/jquery.js"></script> <script src="https://cdn.bootcss.com/jquery/1.4.0/jquery.js"></script> <script src="https://cdn.bootcss.com/jquery/1.5.1/jquery.js"></script> <script src="https://cdn.bootcss.com/jquery/1.6.1/jquery.js"></script> <script src="https://cdn.bootcss.com/jquery/1.7/jquery.min.js"></script> <script src="https://cdn.bootcss.com/jquery/1.8.0/jquery-1.8.0.js"></script> <script src="https://cdn.bootcss.com/jquery/1.9.0/jquery.js"></script> <script src="https://cdn.bootcss.com/jquery/1.10.0/jquery.js"></script> <script src="https://cdn.bootcss.com/jquery/1.11.0/jquery.js"></script> <script src="https://cdn.bootcss.com/jquery/1.12.0/jquery.js"></script> <script src="https://cdn.bootcss.com/jquery/2.0.0/jquery.js"></script> <script src="https://cdn.bootcss.com/jquery/2.1.0/jquery.js"></script> <script src="https://cdn.bootcss.com/jquery/2.2.0/jquery.js"></script> <script src="https://cdn.bootcss.com/jquery/3.0.0/jquery.js"></script> <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>
The above is the detailed content of Solution to the problem that elements dynamically loaded by js/jq cannot be monitored. For more information, please follow other related articles on the PHP Chinese website!