Нажмите Событие для динамических c сгенерированных вкладок - PullRequest
Новая
       8

Нажмите Событие для динамических c сгенерированных вкладок

0 голосов
/ 22 января 2020

Я использую 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/jqeuery-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 для вставки определенных c данных по нажатой вкладке в текстовое поле. Например:

Первая вкладка нажата -> textbox1.text = "Первая вкладка нажата";

Вторая вкладка нажата -> textbox1.text = "Вторая вкладка нажата";

enter image description here

1 Ответ

0 голосов
/ 22 января 2020

Примерно так: 

<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 Делегированный обработчик событий и всплывающее событие на динамически создаваемых вкладках.

...