xuhanchn 2016-09-30 08:29 采纳率: 100%
浏览 6865
已采纳

jquery添加的元素id,添加click事件不起作用

我自己做了一个对话框
用jq控制,点击一个按钮的时候才把这个对话框加到html中

但这个对话框中的按钮的id起不到作用

是不是我添加的方式有问题?

代码如下:
可以复制到这个地址测试:http://www.runoob.com/try/try.php?filename=tryjquery_hide

 <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"></script>

<style>
    .confirmWindow {
    z-index: 99999;
    position: fixed;
    top: 30px;
    left: 50px;
    width: 445px;
    height: 140px;  
    font-size: 12px;
    color: #000;
    padding: 0;
    margin: 0;
    background-color: #fff;
    border: 1px solid #bababa;
    border-radius: 2px;
    -webkit-box-shadow: 0px 1px 3px #888;
    -moz-box-shadow: 0px 1px 3px #888;
    box-shadow: 0px 1px 3px #888
}
.confirmContent {
    margin: 0;
    padding: 45px 10px 25px 25px
}
.confirmButton {
    margin: 0;
    padding: 0 25px 25px 0
}
#confirm-yes, #confirm-no {
    display:inline-block;
    cursor: default;
    padding: 6px 25px;
    margin: 0;
    border:1px solid #b3b3b3;
    border-radius: 2px;
    font-weight: bold;
    -webkit-user-select:none;
    -moz-user-select:none;
    -ms-user-select:none;
    user-select:none;
    -webkit-box-shadow: 0px 0px 1px #888;
    -moz-box-shadow: 0px 0px 1px #888;
    box-shadow: 0px 0px 1px #888;
    float: right
}
#confirm-no {
    margin: 0 0 0 15px
}
#confirm-yes:active, #confirm-no:active {
    background-color: #e6e6e6;
    color: #676767;
    font-weight: normal
}
#confirm-yes:focus, #confirm-no:focus {
    border: 1px solid #3b79ed
}
</style>

<script>
$(document).ready(function(){
  $("p").click(function(){

        $("body").append("<div class=\"confirmWindow\"><div class=\"confirmContent\">测试添加的对话框" +
                "</div><div class=\"confirmButton\"><div id=\"confirm-no\">取消</div>" +
                "<div id=\"confirm-yes\">确定</div></div></div>");        

  });

    $("#confirm-yes").click(function() {
        alert("点击了确定按钮");
    });
    $("#confirm-no").click(function() {
        alert("点击了取消按钮");
        $(".confirmWindow").remove();
    });


});
</script>
</head>
<body>
<p>点我</p>




</body>
</html>
  • 写回答

3条回答 默认 最新

  • 惟馨 2016-09-30 08:36
    关注

    按钮添加点击事件的时候,按钮还没插入页面呢,$("#confirm-yes")根本获取不到元素,所以点击事件也不能绑定上
    要把绑定事件加到append后面才行
    $(document).ready(function(){
    $("p").click(function(){

        $("body").append("<div class=\"confirmWindow\"><div class=\"confirmContent\">测试添加的对话框" +
                "</div><div class=\"confirmButton\"><div id=\"confirm-no\">取消</div>" +
                "<div id=\"confirm-yes\">确定</div></div></div>");      
    
                     $("#confirm-yes").click(function() {
        alert("点击了确定按钮");
    });
    $("#confirm-no").click(function() {
        alert("点击了取消按钮");
        $(".confirmWindow").remove();
    });
    

    });

    });

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(2条)

报告相同问题?

悬赏问题

  • ¥20 求数据集和代码#有偿答复
  • ¥15 关于下拉菜单选项关联的问题
  • ¥15 如何修改pca中的feature函数
  • ¥20 java-OJ-健康体检
  • ¥15 rs485的上拉下拉,不会对a-b<-200mv有影响吗,就是接受时,对判断逻辑0有影响吗
  • ¥15 使用phpstudy在云服务器上搭建个人网站
  • ¥15 应该如何判断含间隙的曲柄摇杆机构,轴与轴承是否发生了碰撞?
  • ¥15 vue3+express部署到nginx
  • ¥20 搭建pt1000三线制高精度测温电路
  • ¥15 使用Jdk8自带的算法,和Jdk11自带的加密结果会一样吗,不一样的话有什么解决方案,Jdk不能升级的情况