Jquery click event of anchor tag not working

how to call click event of anchor tag in jquery\
anchor tag click event jquery
a tag click not working
anchor tag href not working
click anchor tag using javascript
jquery link click function
how to call anchor tag click event javascript
a href click 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>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>

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.

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

Click function of anchor tag not working with href , This method didn't work and on clicking the anchor tag, the div stayed visible. I then tried the event.preventDefault(); method and that worked. Inside a jQuery loop, I'm trying to attach a click event to a dynamically created anchor tag which is contained in an LI element. The LI itself is dynamically created inside a static UL element. For some reason nothing gets fired when the anchor is clicked. Here is a simplified version of the problematic code:

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.

how to alert on click event of anchor tag using jquery, i to alert on click event of anchor tag using jquery my code is: <a href="#" class="​order"><img src="image/payment.png" width="20"  The get(0) will return the first DOM object instead of the jquery object, and click() will be triggered. As you don't have any .click() event bound on it, it never fires it. You need to fire the DOM click event with .click() instead of .trigger(e) of jQuery method and this should only work on dom nodes.

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

jQuery element.click() doesn't work when element is an anchor tag , jQuery element.click() doesn't work when element is an anchor tag # I like to call click since it might be a button or a link (with an href and/or and event). contrary, jQuery's .click() does not launch the href on an anchor tag. Re: click event of anchor tag does not work Jan 31, 2020 01:53 PM | mgebhard | LINK If you make the dropdown clickable then you will not be able to select the menu items.

Trigger click event of an anchor tag with JavaScript/jQuery, The idea is to use jQuery's .click() method to trigger the “click” JavaScript event on an element. This is demonstrated below: JS; HTML  how to alert on click event of anchor tag using jquery [Answered] RSS 4 replies Last post May 19, 2014 07:11 AM by Ashim Chatterjee

In jQuery, how can I trigger the click event on the href element , If you want to have a click event on an element then simply add the click event an anchor, just give your anchor some id and add the click event in jQuery like If you are trying to trigger an event on the anchor, then the code you have will work. tag to null or # or completely remove it, since your click handler might not be  The click event is only triggered after this exact series of events: The mouse button is depressed while the pointer is inside the element. The mouse button is released while the pointer is inside the element. This is usually the desired sequence before taking an action. If this is not required, the mousedown or mouseup event may be more suitable.

jQuery Click Event Not Working On Mobile And Other Touch Devices, This might happen when the event is not attached to an anchor tag but to some other element, like a div. There is a very simple solution to fix  How to add onclick attribte of anchor using jquery Apr 05, 2011 10:09 AM | vikas227 | LINK i am using this code.this is working fine in mozilla(not working in IE)

Comments
  • Yes , I guess everyone got that right . I had to call the handler on future objects as well. Thanks guys as always .