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

3 Answers 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
});