dynamically creating buttons with dynamic id calling a function not working

Question

The scenario is, a hyperlink below is toggling a modal as well as creating two buttons inside modal(using javascript having a dynamic id--inspect for button id).

The requirement is on the click of verifybtn0, the rejectbtn0 should disable and viceversa.

In plunker attached, alert is not reached(mentioned in plunker). Here is, plunker link http://plnkr.co/edit/KgB8yPtcmxYJzQCWB3PJ?p=preview

For more understanding, have a look at 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>

Please include the logic regarding your question in the question itself, as specified in https://stackoverflow.com/help/how-to-ask — Taplar, Aug 07 '17 at 18:57
You have a typo - or, two related typos. Your actual button ids are `"verifybtn0 "` and `"rejectbtn0 "` (note the spaces), so `getElementById()` never finds either of them without the space. — Paul Roub, Aug 07 '17 at 19:17
thanks Paul, finally issue is solved. A slight mistake had created a problem :) — , Aug 07 '17 at 19:23

score -1 · Answer 1 · answered Aug 07 '17 at 19:17

First you need to understand how Javascript and DOM works.

When you load your page, the first thing that loads is DOM ( your HTML content ), then once DOM loads, all the javascript events (like Click, mouseover) are registered.

When you dynamically create HTML elements , the events will not be registered because your DOM has already loaded .

Inorder to rebind the newly inserted elements and events, you have to do Dynamic Binding using Jquery. Look at the below link on how to do it

Event binding on dynamically created elements?

The linked question doesn't apply - there are no global `on()` handlers missing the new elements; each element in the question actually has an explicit link attached. There's a typo in the generation JS, adding unwanted spaces to the `id` attributes. — Paul Roub, Aug 07 '17 at 19:19

dynamically creating buttons with dynamic id calling a function not working

1 Answers1