Javascript 通过Jquery创建表时，Jquery切换不起作用

与使用while循环创建表不同的是，如果我正在写入html inside body标记，则切换按钮正在工作，但是如果我使用while循环创建表，则切换按钮不工作

<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);
    }

$（文档）.ready（函数（）{
调试器；
$（'.jq\u show\u table'）。切换（函数（）{
$（this.text（'Hide'）；
$（“.tab_taggle”）.show（）；
}，函数（）{
$（“.tab_taggle”）.hide（）；
$（this.text（'Show'）；
}
);
函数GetLocations（）{
$.ajax({
url:“Location.aspx/GetLocations”，
类型：“POST”，
数据：“{}”，
contentType:“应用程序/json；字符集=utf-8”，
数据类型：“JSON”，
成功：函数（数据）{debugger；BindLocation（data.d）；}，
错误：函数（数据）{BindLocation（data.d）；}，
});
}
函数绑定位置（locationList）{
调试器；
var表=”；
表+=”；
表+=“用户名”；
表+=“表格”；
表+=“参观地点”；
表+=“设置”；
表+=”；
表+=”；
表+=“”+”用户名“+”；
表+=“表格”；
表+=“参观地点”；
表+=”；
表+=”；
表+=“GPSOff”；
表+=“电话网络关闭”；
表+=“自动启动功能”；
表+=“自动启动功能”；
表+=“连接断开”；
表+=”；
表+=“”
表+=”；
表+=”；
// }
表+=”；
$（'#onTable'）.html（表格）；
}

在…上

---

简单地说，您正在尝试将事件侦听器绑定到一个不存在的元素。为了修复它，您应该在将该表呈现为#onTable div之后设置事件侦听器。因此，如果我是您，我将创建一个函数来像这样绑定事件侦听器

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

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

---

然后，在结束标记和

BindLocation

函数的

$（'#onTable'）.html（table）

行之间，我会像这样调用它：

initListener（）；

您需要绑定ajax成功中的切换部分，因为您要将切换绑定到DOM中尚不存在的元素

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); },
        });
    }

---

我建议您将

切换

更改为

单击

，因为您的元素将被动态添加，所以您需要在此处进行

事件委派

。因此，进行以下更改：

$（文档）.ready（函数（）{
$（'onTable'）。在（'click'，'jq_show_table'，函数（）{
//活动代表团
var text=$（this.text（）；
//获取元素的文本
if（text=='Show'）//if Show
{
$（this.text（'Hide'）；
$（“.tab_taggle”）.show（）；
}
否则//如果隐藏
{
$（“.tab_taggle”）.hide（）；
$（this.text（'Show'）；
}
})
函数BindLocation（）{
调试器；
var表=”；
表+=”；
表+=“用户名”；
表+=“表格”；
表+=“参观地点”；
表+=“设置”；
表+=”；
表+=”；
表+=“”+”用户名“+”；
表+=“表格”；
表+=“参观地点”；
表+=”；
表+=”；
表+=“GPSOff”；
表+=“电话网络关闭”；
表+=“自动启动功能”；
表+=“自动启动功能”；
表+=“连接断开”；
表+=”；
表+=“”
表+=”；
表+=”；
// }
表+=”；
$（'#onTable'）.html（表格）；
}
BindLocation（）；
})；

在…上

您丢失了}）；在你的剧本结尾，no@osama，那是个打字错误

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); },
        });
    }