Jquery点击锚标记的事件不起作用

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

您可以尝试事件委派，因为由于您的条件检查文档而未在DOM中加载#logout元素： http ：//api.jquery.com/on/

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

Answer 3

据我所知，logout链接是动态添加到DOM的，这就是为什么$('#logout').click的事件处理程序没有绑定到指定的元素。

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

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