动态变更绑定的laydate类型，第一次点击无法触发点击事件，第二次才能触发

本文链接：https://blog.csdn.net/xcdsdf14545/article/details/103633530

本文探讨了在使用jQuery动态生成元素并绑定点击事件时，首次点击无法触发事件的问题。通过将点击事件替换为聚焦事件(onfocus)，成功解决了初始化时误触发的问题。文章详细介绍了事件绑定的修改过程，并涉及了laydate日期选择器的使用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

第一次点击无法触发点击事件

<div class="contain" id="changeDiv">
   <div class="edit-div" contenteditable="true"></div>
</div>
-----------------------------------------------------------
function change(){
    var changeDiv=$("#changeDiv")
    if(data[1].id==1101){
        var $div=$("<div class=\"edit-div\" onclick=\"simpleDate(this)\"  contenteditable=\"true\"></div>");
        // $div.click()//初始化点击事件
        changeDiv.html($div)
    }else if(data[1].id==1109){
        var $div=$("<div class=\"edit-div\" onclick=\"rangeDate(this)\"  contenteditable=\"true\"></div>");
        // $div.click()//初始化点击事件
        changeDiv.html($div)
    }else if(data[1].id==1110){
        changeDiv.html("<div class=\"edit-div\" contenteditable=\"true\"></div>")
    }
}
------------------------------------------------------------
layui.use('laydate', function(){
    var laydate = layui.laydate;
    //时间选择器
    window.rangeDate = function (that){
        var routeTime = {
            type: 'datetime',
            range: true
        };
        routeTime.elem = that;
        laydate.render(routeTime);
    }
    window.simpleDate = function (that){
        var routeTime = {
            type: 'datetime',
        };
        routeTime.elem = that;
        laydate.render(routeTime);
    }
});

如果在变更时初始化点击事件"$div.click()"，却又会在初始化时触发点击事件

解决办法是将onclick事件修改为onfocus事件

οnfοcus=\"simpleDate(this)\"