锚标记的jQuery单击事件不起作用答案

【问题标题】：Jquery click event of anchor tag not working锚标记的jQuery单击事件不起作用
【发布时间】：2018-08-13 15:51:28
【问题描述】：

我无法在 div 标签内的 <a> 标签上触发点击事件。这是我的 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) click 处理程序以及里面的函数，它就可以工作。因此，在浏览器控制台上编写相同的代码并再次单击锚标记后，用户将被注销。但是为什么不在浏览器控制台上写入就不会触发此事件。我检查了 JS 的 DOM 脚本。代码已加载到浏览器上，不会像构建中遗漏代码一样。

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

【问题讨论】：

标签： javascript java jquery jsp

【解决方案1】：

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

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

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

【讨论】：

【解决方案2】：

如果您的#logout 元素在页面加载时不存在，那么您需要像这样指定您的点击语句：

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

如果页面加载时元素不存在，标准的 jQuery .click 将不起作用。

【讨论】：

是的，我想每个人都猜对了。我还必须在未来的对象上调用处理程序。一如既往地感谢大家。

【解决方案3】：

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

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

【讨论】：