动态创建具有动态id的按钮,调用函数不起作用

时间:2017-08-07 18:51:26

标签: javascript jquery

场景是,下面的超链接是切换模态以及在模态内创建两个按钮(使用具有动态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" >&times;</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>

1 个答案:

答案 0 :(得分:-1)

首先,您需要了解Javascript和DOM的工作原理。

当您加载页面时,首先加载的是DOM(您的HTML内容),然后一旦DOM加载,所有javascript事件(如Click,mouseover)都会被注册。

当您动态创建HTML元素时,由于您的DOM已经加载,因此不会注册事件。

为了重新绑定新插入的元素和事件,您必须使用Jquery进行动态绑定。请查看以下链接,了解如何操作

Event binding on dynamically created elements?