Question

我无法在div标签内的<a>标签上触发click事件。这是我的UI JSP代码

<div class="container" id="userHeader">
    <c:choose>
        <c:when test="${isLogin}">
            <ul>
                <li>Hello ,${user.name}</li>
                <li> Call : **********</li>
                <li>xyz@gmail.com</a></li>
                <li><a id="logout">Sign Out</a></li>
            </ul>
        </c:when>
        <c:otherwise>
            <ul>
                <li>Sign In </li>
                <li>Sign Up </li>
                <li>Call : *********</li>
                <li>xyz@gmail.com</li>
            </ul>
        </c:otherwise>
    </c:choose>
</div>

单击“登录”将打开一个表单，并且该表单已提交并完美验证。 “登录”后，注销标签将显示在屏幕上。不，单击“注销”不起作用。 $("#logout")，甚至没有触发点击处理程序。这是代码的JQuery和JS部分：

$(document)
    .ready(
        function() {
            // SUBMIT FORM
            $("#signInForm").submit(function(event) {
                event.preventDefault();
                signInAjaxPost();
            });
         function signInAjaxPost() {
            // PREPARE FORM DATA
            // do ajax request and set html
         }
         // **The logout anchor tag handler for sign out (This is not working , its not even fired)**
        $('#logout').click(function (e) {
            debugger;
            e.preventDefault();
            signOutPost();
        });

        function signOutPost() {
            //sign out code
        }
    });

现在，如果我在浏览器控制台上编写$(#logout)点击处理程序以及其中的函数，则可以正常工作。因此，在浏览器控制台上编写相同的代码并再次单击定位标记后，用户将注销。但是，为什么不在浏览器控制台上编写就不会触发此事件。我检查了JS的DOM脚本。该代码已加载到浏览器中，这与构建中缺少代码不一样。

我一直在搜索，找不到解决方案甚至根本原因。

Answer 1

如果您的#logout元素在页面加载时不存在，则需要这样指定click语句：

$("#userHeader").on("click", "#logout", function(e) {
    debugger;
    e.preventDefault();
    signOutPost();
});

如果页面加载时该元素不存在，则标准jQuery .click无法使用。

Answer 2

您可以尝试事件委托，因为由于您的情况，#logout元素未加载到DOM中检查文档：http://api.jquery.com/on/

$('#userHeader').on('click',"#logout",function (e) {
    // code
});

Answer 3

据我了解，注销链接是动态添加到DOM的，这就是$('#logout').click的事件处理程序未绑定到指定元素的原因。

减轻这种情况的一种方法是使用on()，它也将事件绑定应用于将来的对象。请尝试以下操作：

$('#userHeader').on('click', '#logout', function(e) {
  e.preventDefault();
  signOutPost();
});

锚点标签的jQuery单击事件不起作用

3 个答案: