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

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条)

报告相同问题?

悬赏问题

  • ¥15 换yum源但仍然用不了httpd
  • ¥50 C# 使用DEVMOD设置打印机首选项
  • ¥15 麒麟V10 arm安装gdal
  • ¥15 想用@vueuse 把项目动态改成深色主题,localStorge里面的vueuse-color-scheme一开始就给我改成了dark,不知道什么原因(相关搜索:背景颜色)
  • ¥20 OPENVPN连接问题
  • ¥15 flask实现搜索框访问数据库
  • ¥15 mrk3399刷完安卓11后投屏调试只能显示一个设备
  • ¥100 如何用js写一个游戏云存档
  • ¥15 ansys fluent计算闪退
  • ¥15 有关wireshark抓包的问题