时间戳

首页 > 解决方案 > 单击事件以获取动态生成的选项卡

javascript - 单击事件以获取动态生成的选项卡

问题描述

我正在使用 jQuery 和转发器来动态生成选项卡链接。

代码示例：

<head id="Head1" runat="server">
    <link type="text/css" rel="stylesheet" href="App_Themes/Tabs.css" />
    <script type="text/javascript" src="js/jquery-2.2.4.min.js"></script>
    <script type="text/javascript" src="js/jquery-1.10.3-ui.js"></script>
    <script type="text/javascript">
        $(function() {
            $( "#tabs" ).tabs();
        });
    </script>
</head>

<body>
    <form id="form1" runat="server">
        <div id="tabs">
            <asp:Repeater ID="TablLinkRepeater" runat="server">
                <HeaderTemplate>
                    <ul>
                </HeaderTemplate>
                <ItemTemplate>
                    <li><a href="#Tab<%# Eval("TabID") %>">
                        <%# Eval("TabName") %></a></li>
                </ItemTemplate>
                <FooterTemplate>
                    </ul>
                </FooterTemplate>
            </asp:Repeater>

            <%-- Tabs and Content --%>
            <asp:Repeater ID="TabRepeater" runat="server">
                <ItemTemplate>
                    <div id="Tab<%# Eval("TabID") %>">
                        <h1>Tab #
                            <%# Eval("TabName") %>
                        </h1>
                        <div class="Content" id="ContentDiv" runat="server">
                            <%-- Some content--%>
                            <asp:Label ID="Index" runat="server" />
                            <asp:TextBox ID="textbox1" runat="server" BorderStyle="none"></asp:TextBox>
                            <br />
                            <br />
                        </div>
                    </div>
                </ItemTemplate>
            </asp:Repeater>
        </div>
    </form>
</body>

我现在想实现一个 onclick 事件以将单击选项卡的特定数据插入到文本框中。例如：

单击的第一个选项卡-> textbox1.text = "单击了第一个选项卡";

单击第二个选项卡-> textbox1.text = "单击了第二个选项卡";

在此处输入图像描述

标签： javascriptjqueryasp.nettabsonclick

解决方案

像这样的东西：

<div id="tabs">
    <ul>
      <li><a href="#Tab1" data-text="First tab">Tab1</a></li>
      <li><a href="#Tab2" data-text="Second tab">Tab2</a></li>
    </ul>
</div>
<input id="result" type="text"/>


$(function(){
    $('#tabs').on("click","ul li a", function(){
    var link = $(this);
    $("#result").val(link.attr("data-text"));
  })
});

关键是 jQuerys Delegated 事件处理程序和动态创建的选项卡上的事件冒泡。

推荐阅读