Question

我想在用户单击列表项时弹出模式弹出窗口。当用户单击按钮时，弹出窗口起作用，但是当用户单击列表项时，我希望它起作用。

我试图在列表项中添加onClientClick，但这不起作用。

这是我的JavaScripts

<script type="text/javascript">
    function ShowModalPopup() {
        $find("mpe").show();
        return false;
    }
        function HideModalPopup() {
        $find("mpe").hide();
        return false;
    }
</script>

<div class="drag-options" id="options5"></div>
<ul class="drag-inner-list" id="5">
    <li class="drag-item"></li>
    <li class="drag-item"></li>
    <li class="drag-item">
        <asp:Button ID="btnShow" runat="server" Text="Show Modal Popup" OnClientClick="return ShowModalPopup()" />
        <asp:LinkButton ID="lnkDummy" runat="server"></asp:LinkButton>
        <cc1:modalpopupextender id="ModalPopupExtender1" behaviorid="mpe" runat="server"
            popupcontrolid="pnlPopup" targetcontrolid="lnkDummy" backgroundcssclass="modalBackground">
                    </cc1:modalpopupextender>
        <asp:Panel ID="pnlPopup" runat="server" CssClass="modalPopup" Style="display: none">
            <div class="header">
                Modal Popup
            </div>
            <div class="body">
                This is a Modal Popup.
                            <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
                <asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
                <asp:TextBox ID="TextBox3" runat="server"></asp:TextBox>
                <asp:TextBox ID="TextBox4" runat="server"></asp:TextBox>
                <br />
                <asp:Button ID="btnHide" runat="server" Text="Hide Modal Popup" OnClientClick="return HideModalPopup()" />
            </div>
        </asp:Panel>
    </li>
    <li class="drag-item"></li>
</ul>
</li>
        <li class="drag-column drag-column-approved">
            <span class="drag-column-header">
                <asp:Label ID="Label6" runat="server" Text="Label">Approved</asp:Label>
            </span>
            <div class="drag-options" id="options6"></div>
            <ul class="drag-inner-list" id="6">
                <li class="drag-item"></li>
                <li class="drag-item"></li>
            </ul>
        </li>
</ul>
</div>

我希望li中的OnClientClick起作用。谢谢您的帮助。

Answer 1

您可以将click事件绑定到li或类似drag-item的类。

<script>
    $(document).ready(function () {
        $('li').click(function () {
            alert('li clicked');
        });

        $('.drag-item').click(function () {
            alert('class drag-item clicked');
        });
    });
</script>

请注意：您发布的代码中的html不正确。缺少<ul>，最后一个</div>没有开头标签。

Answer 2

您可以使用getElementsByTagName将所有列表项存储在数组中，然后遍历它们以添加onclick处理程序：

var listItems = document.getElementsByTagName("li")

for (var i = 0; i < listItems.length; i++) { 
    listItems[i].addEventListener("click", function(event) {
        console.log("list item clicked");
    });
}

Answer 3

这应该给您您要的东西：

document.getElementById("ID you add to the li element").addEventListener("click", function() {/*Insert the script you want to run.*/})

我希望javascript在<li>单击上执行

3 个答案: