例子如下(示例一):
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="js/jquery-3.6.0.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> var count = 1; $(function(){ $("button").click(function(){ $("#main").append("<div>"+ count++ +"</div> ") }) //针对于 正常的流程来说,只要页面存在 该元素,都可以添加对应的事件 //如果页面加载完毕后,没有此 元素对象,那么 就无法绑定事件 //解决方案 //3.6 中 无法使用 live 所以需要使用 on // $("#sc") 父元素节点给子元素添加事件 on 第一个 参数为 对应的事件 第二个 为 父元素中需要添加子元素的对象 第三个为 添加事件处理的 函数 $("#main").on("click","div",function(){ alert( $(this).html() ) }) }) </script> </head> <body> <div> cxccc </div> <button> 生成一个div </button> <div id="main"> <!-- 3.6 要求 触发页面没有生成的 元素时,必须是某一个元素的子类 --> </div> </body> </html>
例子如下(示例二):
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="js/jquery-3.6.0.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> $(function(){ // readonly 是 只读,只能看,不能修改 只有在文本中有效 // disabled 不能用,只能看, 所有的效果都失效 所有输入交互都有效 $("#AllSelect").change(function(){ console.log( $(this).prop("checked") ) if( $(this).prop("checked") ){ $("input").prop("disabled",false) }else{ $("input:not(#AllSelect)").prop("disabled",true) } }) }) </script> </head> <body> <input type="text" value="只能看" disabled="disabled" readonly="readonly" /> <br> <input type="radio" disabled="disabled" /> <br> <input type="button" value="按钮" onclick="alert(11)" disabled="disabled" /> <br> <input type="checkbox" id="AllSelect" /> 勾选以使用! </body> </html>