场景是,下面的超链接是切换模态以及在模态内创建两个按钮(使用具有动态ID的javascript - 检查按钮ID)。
要求是点击verifybtn0,rejectbtn0应该禁用,反之亦然。
在连接的plunker中,未达到警报(在plunker中提到)。 这是,plunker链接http://plnkr.co/edit/KgB8yPtcmxYJzQCWB3PJ?p=preview
要了解更多信息,请查看plunker。
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">
<script src="script.js"></script>
</head>
<body>
<div id="annexureModal" class="modal fade" role="dialog">
<div class="modal-dialog" style="width: 40%;">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" id="closebtn" >×</button>
<h4 class="modal-title">Annexure List</h4>
</div>
<div class="modal-body text-center" style="background-color: #fff;height: 500px;width:100px;">
<div class="col-xs-12 rmpm">
<table class="table" id="tableAnnexure" style="height:430px;">
<tbody>
<tr>
<td colspan= "2" style="">
<div class="" id="verifybtndiv" style='width:auto;float:left;background:red; '></div>
<div class="" id="rejectbtndiv" style='width:auto;float:left;background:green; '></div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
<a href="#" id="" data-toggle="modal" data-target="#annexureModal" onclick="createVerifyRejectbtn('0')">Annexure</a>
<script type="text/javascript">
function createVerifyRejectbtn(id){
alert("annexureLink clicked");
var html= "";
html = "<button type='button' class='btn btn-success' id='verifybtn"+id+" ' onclick='disablebtn(this.id)' >Verify</button>";
$("#verifybtndiv").html(html);
html = "<button type='button' class='btn btn-warning' id='rejectbtn"+id+" ' onclick='disablebtn(this.id)' >Reject</button>";
$("#rejectbtndiv").html(html);
}
function disablebtn(id){
var idd = id;
// alert(typeof(idd));
alert(idd);
if(idd === "verifybtn0"){
alert("verifybtn0"); /* here alert is not reaching*/
document.getElementById(id).disabled = false;
document.getElementById("rejectbtn0").disabled = true;
}
else if(idd ==="rejectbtn0"){
alert("rejectbtn0"); /* here alert is not reaching*/
document.getElementById(id).disabled = false;
document.getElementById("verifybtn0").disabled = true;
}
}
</script>
</body>
</html>
答案 0 :(得分:-1)
首先,您需要了解Javascript和DOM的工作原理。
当您加载页面时,首先加载的是DOM(您的HTML内容),然后一旦DOM加载,所有javascript事件(如Click,mouseover)都会被注册。
当您动态创建HTML元素时,由于您的DOM已经加载,因此不会注册事件。
为了重新绑定新插入的元素和事件,您必须使用Jquery进行动态绑定。请查看以下链接,了解如何操作