sgsy_2013
xuhanchn
采纳率92.7%
2016-09-30 08:29

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条回答

  • u011050541 惟馨 5年前

    按钮添加点击事件的时候,按钮还没插入页面呢,$("#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 评论 复制链接分享
  • qq_26677429 djkloop555 5年前

    代码执行不是从上到下么。图片说明

    点赞 评论 复制链接分享
  • qq_33159509 Sunny阳 5年前

    因为你点了'点我' 才有confirm-yes confirm-no 这两个元素 你把这两个元素的点击事件放到append后面就可以了

    点赞 评论 复制链接分享

相关推荐