使div可單擊並使用CommandName =“ Select”

Question

下面的代碼工作正常，當我單擊LinkButton ，選擇將被觸發。

但是我在div上有一個懸停樣式，以便在鼠標進入時它將更改顏色。 這使用戶感到困惑，因為當他們單擊div時，只有當他們單擊LinkButton時，什么都不會發生。

我希望在用戶單擊div時觸發CommandName="Select" 。 我怎樣才能做到這一點？

<ItemTemplate>
    <div class="Card">
        <h4>
            <asp:LinkButton ID="SelectButton" Text='<%# Eval("Name") %>' CommandName="Select" runat="server"/> 
        </h4>
        <asp:Label runat="server" Text='<%# Eval("date") %>' />
        <asp:Label runat="server" Text='<%# Eval("location") %>' />
        <br />
    </div>
</ItemTemplate> 

Answer 1

您可以使用jquery在div單擊時觸發按鈕的click事件

$("#Card").click(function(){
    $("[id$=SelectButton]").trigger('click');
});

Answer 2

我通過將LinkButton放置在div之外來解決了我的問題。 現在，整個div在DataList都可以單擊。

<ItemTemplate>
    <asp:LinkButton CommandName="Select" runat="server">
        <div class="Card">
            <h4>
                <asp:Label runat="server" Text='<%# Eval("Name") %>'></asp:Label>
            </h4>
            <asp:Label runat="server" Text='<%# Eval("date") %>' />
            <asp:Label runat="server" Text='<%# Eval("location") %>' />
            <br />
        </div>
    </asp:LinkButton>
</ItemTemplate>