CODEWITHSUNDEEP
javascriptjavajqueryjsp
Sahil Gupta
Sahil Gupta

Reputation: 73

Jquery click event of anchor tag not working

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.

Upvotes: 1

Views: 4887

Answers (3)

31piy
31piy

Reputation: 23859

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

Upvotes: 3

khofaai
khofaai

Reputation: 1357

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

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

Upvotes: 1

Hunter Turner
Hunter Turner

Reputation: 6894

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.

Upvotes: 1

Related Questions