解决 JQuery 无法获取动态加载的内容 不用on函数

在使用JQuery的过程中，遇到一个需求，通过load函数加载一段页面作为模态框。
但JQuery选择器无法选取动态加载的内容，导致按钮事件无法绑定，input回显无法添加

搜了一下，大家都说使用on函数，对未来的元素进行绑定操作，需选择一个不是动态加载的父元素

但实际操作上这种方式过于复杂，而且不适合我的页面

我相信总有更简洁美观的方式实现这一功能。

上代码

function renameCurrent(name){
    $("#_inner_page_bg").load("/page/insidePage/renamePage.html #needLoad",function (){
        $("#newName").val(name)//操作新标签内容
        $("#newName").focus()
        $("#newName").click(function (){//对新元素绑定按钮事件
            alert(111)
        })
    })
}

伪代码解析

$("待加载元素的选择器").load("页面路径 需加载元素的选择器",加载完成后执行的函数)

即

$("#id1").load("/???.html #id2",function(){/*加载完成后执行的代码，可以选择到对象*/})

经试验，JQuery并不是如网上所说，不能操作动态加载的元素。

实测使用js的setTimeOut()函数是可以在短暂延迟后操作被加载内容的。

分析为页面内容的load和js脚本的执行是异步的，并不是完全阻塞的。这导致页面在尚未加载完成时，JQuery过快对新加载元素执行操作。

本种写法可以保证html完全载入后执行函数。

忘记.on()函数吧！

使用版本：JQuery 3.5.1
环境：谷歌内核