我自己做了一个对话框
用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>