javascript - Jquery click event of anchor tag not working - Stack Overflow

admin管理员组

文章数量:1432196

I am unable to fire the click event on an <a> tag which is inside the div tag. Here is my JSP code for UI

<div class="container" id="userHeader">
    <c:choose>
        <c:when test="${isLogin}">
            <ul>
                <li>Hello ,${user.name}</li>
                <li> Call : **********</li>
                <li>[email protected]</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>[email protected]</li>
            </ul>
        </c:otherwise>
    </c:choose>
</div>

Clicking on "sign in" will open a form and that form is submitted and validated perfectly. After "sign in", the logout tag will appear on the screen instead. No, clicking on "sign out" doesn't work. $("#logout"), click hander is not even fired. Here is the JQuery and JS part of the code:

$(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
        }
    });

Now, if I write the $(#logout) click handler on browser console along with the function inside, it works. Thus, after writing the same code on browser console and clicking the anchor tag again the user is logged out. But why does this event is not fired without writing on browser console. I checked the DOM scripts for JS. The code is loaded onto the browser, it's not like code is missed in the build.

I have searched throughout, unable to find a solution or even root cause to this problem.

I am unable to fire the click event on an <a> tag which is inside the div tag. Here is my JSP code for UI

<div class="container" id="userHeader">
    <c:choose>
        <c:when test="${isLogin}">
            <ul>
                <li>Hello ,${user.name}</li>
                <li> Call : **********</li>
                <li>[email protected]</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>[email protected]</li>
            </ul>
        </c:otherwise>
    </c:choose>
</div>

Clicking on "sign in" will open a form and that form is submitted and validated perfectly. After "sign in", the logout tag will appear on the screen instead. No, clicking on "sign out" doesn't work. $("#logout"), click hander is not even fired. Here is the JQuery and JS part of the code:

$(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
        }
    });

Now, if I write the $(#logout) click handler on browser console along with the function inside, it works. Thus, after writing the same code on browser console and clicking the anchor tag again the user is logged out. But why does this event is not fired without writing on browser console. I checked the DOM scripts for JS. The code is loaded onto the browser, it's not like code is missed in the build.

I have searched throughout, unable to find a solution or even root cause to this problem.

• javascript
• java
• jquery
• jsp

Share Improve this question Follow edited Aug 15, 2018 at 21:02 Hunter Turner 6,9241111 gold badges4242 silver badges5757 bronze badges asked Aug 13, 2018 at 15:51 Sahil GuptaSahil Gupta 7311 gold badge33 silver badges1212 bronze badges 0

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 3

As far as I understand, the logout link is added to the DOM dynamically, and that's why the event handler for $('#logout').click isn't bound to the specified element.

One way to mitigate this is to use on() which applies the event binding to the future objects as well. Try the following:

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

If your #logout element does not exist on page load, then you need to specify your click statement like this:

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

A standard jQuery .click will not work if the element does not exist when the page loads.

You can try event-delegation, because #logout element not loaded in DOM because of your condition check documentation : http://api.jquery./on/

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

本文标签： javascriptJquery click event of anchor tag not workingStack Overflow