Jquery toggle is not working while creating a table through jquery

Question

Insted of creating table using the while loop, if I am writting the html inside body tag than the toggle button is working but if I am creating the table using while loop the toggle button is not working not working.

<script src="../assets/js/jquery-1.10.2.min.js"></script>
<script src="../PurpleStyle/js/jquery.js"></script>

<script type="text/javascript">

    $(document).ready(function () {

        debugger;
        $('.jq_show_table').toggle(function () {
            $(this).text('Hide');
            $(".tab_taggle").show();

        }, function () {
            $(".tab_taggle").hide();
            $(this).text('Show');
        }
        );

   function GetLocations() {
        $.ajax({
            url: "Location.aspx/GetLocations",
            type: "POST",
            data: "{}",
            contentType: "application/json;charset=utf-8",
            dataType: "JSON",
            success: function (data) { debugger; BindLocation(data.d); },
            error: function (data) { BindLocation(data.d); },
        });
    }
 function BindLocation(locationList) {
        debugger;
        var table = "<table width='100%' border='0' cellpadding='0' cellspacing='0' class='table'>";
        table += "<tr class='tab_head'>";
        table += "<td width='7%'>User name</td>";

        table += "<td width='4%'>Form</td>";
        table += "<td width='13%'>Places Visited</td>";
        table += "<td width='7%' align='center'>Setings</td>";
        table += "</tr>";
        table += "<tr>";
        table += "<td valign='middle'>" + "User Name" + "</td>";
        table += "<td valign='middle'>Form  </td>";
        table += "<td valign='middle'>Places Visited</td>";
        table += "<td class='no-padding'>";

        table += "<table width='100%' border='0' cellpadding='0' cellspacing='0' class='tab_taggle'>";
        table += "<tr><td width='54%'>GPS</td><td width='46%' class='off'>Off</td></tr>";
        table += "<tr><td>Phone Network</td><td class='off'>Off</td></tr>";
        table += "<tr><td>Auto Start</td><td class='on'>Off</td></tr>";
        table += "<tr><td>Auto Start</td><td class='on'>Off</td></tr>";
        table += "<tr><td>Connection</td><td class='on'>Off</td></tr>";
        table += "</table>";

        table += "<a class='btn btn_grey jq_show_table' href='#'>Show</a>"
        table += "</td>";
        table += "</tr>";
        // }
        table += "</table>";
        $('#onTable').html(table);
    }

            <div class="tab_container">

                <div id="tab1" class="tab_content">
                    <div class="heading">ON</div>
                    <div id="onTable"></div>

                </div>

Answer 1

I suggest you to change toggle to click and since your element will be added dynamically you need to have event delegation here. So make some changes as below:

$(document).ready(function () {
  $('#onTable').on('click','.jq_show_table',function () {
    //Event Delegation
    var text=$(this).text();
    //get the text of element
    if(text=='Show')//if show
    {
      $(this).text('Hide');
      $(".tab_taggle").show();
    }
    else //if hide
    {
      $(".tab_taggle").hide();
      $(this).text('Show');
    }
  })

 function BindLocation() {
        debugger;
        var table = "<table width='100%' border='0' cellpadding='0' cellspacing='0' class='table'>";
        table += "<tr class='tab_head'>";
        table += "<td width='7%'>User name</td>";

        table += "<td width='4%'>Form</td>";
        table += "<td width='13%'>Places Visited</td>";
        table += "<td width='7%' align='center'>Setings</td>";
        table += "</tr>";
        table += "<tr>";
        table += "<td valign='middle'>" + "User Name" + "</td>";
        table += "<td valign='middle'>Form  </td>";
        table += "<td valign='middle'>Places Visited</td>";
        table += "<td class='no-padding'>";

        table += "<table width='100%' border='0' cellpadding='0' cellspacing='0' class='tab_taggle'>";
        table += "<tr><td width='54%'>GPS</td><td width='46%' class='off'>Off</td></tr>";
        table += "<tr><td>Phone Network</td><td class='off'>Off</td></tr>";
        table += "<tr><td>Auto Start</td><td class='on'>Off</td></tr>";
        table += "<tr><td>Auto Start</td><td class='on'>Off</td></tr>";
        table += "<tr><td>Connection</td><td class='on'>Off</td></tr>";
        table += "</table>";

        table += "<a class='btn btn_grey jq_show_table' href='#'>Show</a>"
        table += "</td>";
        table += "</tr>";
        // }
        table += "</table>";
        $('#onTable').html(table);
    }
  BindLocation();
  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="tab_container">
  <div id="tab1" class="tab_content">
    <div class="heading">ON</div>
    <div id="onTable"></div>
</div>

Answer 2

You need to bind the toggle part in the success of the ajax because you are binding the toggle to an element that doesn't exist in the DOM yet

function GetLocations() {
        $.ajax({
            url: "Location.aspx/GetLocations",
            type: "POST",
            data: "{}",
            contentType: "application/json;charset=utf-8",
            dataType: "JSON",
            success: function (data) { debugger; BindLocation(data.d); 

            $('.jq_show_table').toggle(function () {
                 $(this).text('Hide');
                 $(".tab_taggle").show();

             }, function () {
             $(".tab_taggle").hide();
             $(this).text('Show');
           });
 },
            error: function (data) { BindLocation(data.d); },
        });
    }

Answer 3

simply put, you are trying to bind the event listener to a non existing element. In order to fix it, you should set event listener after you rendered that table to #onTable div. So if i were you, i would create a function to bind the event listener like so;

var initListener = function(){
    $('.jq_show_table').toggle(function () {
        $(this).text('Hide');
        $(".tab_taggle").show();

    }, function () {
        $(".tab_taggle").hide();
        $(this).text('Show');
    });
}

And then, between the closing tag and $('#onTable').html(table); line of BindLocation function, i would call it like: initListener();