使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>