jquery .click() event on dynamic anchor does not work

Question

I have a <span class="clickspan">Some text here</span>

What I'm trying to do is when the span is clicked a dynamic anchor is created for the clicked span and then click event is triggered with jquery on the dynamic anchor.

$('.clickspan').on('click', function(){

    // Method 1: Replace span with dynamic anchor
    $(this).replaceWith('<a id="1234" href="www.example.com"></a>');

    // None of the following works
    $('#1234').trigger('click');
    $('#1234').click();

    // Method 2: Insert dynamic anchor inside the span
    var theSpan = $(this).wrapInner('<a href="'+data.msg+'" donwload></a>'),
        anch = theSpan.find('a');

    // this click event on the dynamic anchor inside the span causes the click
    // event on the parent span and to run the entire script all over again.
    anch.click(); 
});

I've been struggling with this for a while and exhausted all ideas, so I'd appreciate any suggestion.

SOLVED

The method and the source suggested by @Ninsly in the comment below fixed the issue. The following worked:

$('#1234')[0].click();

Sorry for taking everybody's time. I was not aware of the need to use [0].

Are you creating an element to just redirect to that page? Or do you want to fire a click event for another click handler? — Spokey, Oct 24 '14 at 12:22
I'd use `window.href`, but I need to dynamically decide whether to donwload target file in achor or open it in the broswer. So the idea is to add either `` or `` — qwaz, Oct 24 '14 at 12:26
@Jivings. Sometimes I want, for example, .mp3 or .txt to be download instead of played or opened in a browser — qwaz, Oct 24 '14 at 12:29
Related: http://stackoverflow.com/questions/7999806/jquery-how-to-trigger-click-event-on-href-element (From source: doing `$('#1234')[0].click();` works) — Stryner, Oct 24 '14 at 12:29

wayzz · Answer 1 · 2014-10-24T12:53:09.897

2

After creating the <a> tag bind the .click event to it then use the $('#1234')[0].click();.

Sometimes when you create dynamic html you have to then bind the events to the html you are creating.

Hope it helps :)

edited Oct 24 '14 at 12:53

answered Oct 24 '14 at 12:30

wayzz

585
6
23

score 1 · Answer 2 · answered Oct 24 '14 at 12:51

Method 1 works just fine, only you have to trigger the click event on the DOM element, not the jQuery object.

$(function() {
  $('.clickspan').on('click', function() {
    var anch = $('<a id="1234" href="http://harvest.com"></a>');
    $(this).replaceWith(anch);
    anch[0].click();
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="clickspan">Some text here</span>

SPECIAL NOTE:

Most sites no longer allow display in a frame .... therefore the snippet might not show the site. See console output:

Refused to display 'https://www.google.com/' in a frame because it set 'X-Frame-Options' to 'SAMEORIGIN'. js:1
Refused to display 'https://www.yahoo.com/' in a frame because it set 'X-Frame-Options' to 'DENY'. js:1
Refused to display 'https://twitter.com/' in a frame because it set 'X-Frame-Options' to 'SAMEORIGIN'.

I appreciate your effort and time, but the solution has been already proposed by Ninsly and my post is updated. — qwaz, Oct 24 '14 at 12:55
Great! I am glad you have that taken care of. I'll leave my answer for the benefit of others. — PeterKA, Oct 24 '14 at 12:57

score 0 · Answer 3 · answered Oct 24 '14 at 12:26

0

It looks like you want a redirect:

$('.clickspan').on('click', function(){
    document.location.href = 'http//example.com';
});

answered Oct 24 '14 at 12:26

Jivings

22,834
6
60
101

I've considerer that option, but the problem is that I need to dynamically decide whether to donwload target file in achor or open it in the broswer. So the idea is to add either or – qwaz Oct 24 '14 at 12:28
@dmit The browser handles what to do with the target. – Jivings Oct 24 '14 at 12:28

score 0 · Answer 4 · answered Oct 24 '14 at 12:28

0

Try this way:

$(document).on("click", '.clickspan', function(){

});

If elements are added dynamically you have to bind use listener on a hole document.

answered Oct 24 '14 at 12:28

Michal Olszowski

795
1
8
25

@Jivings sure you can using native DOM click method – A. Wolff Oct 24 '14 at 12:29
@A.Wolff [`bubbling of a click event will not cause an element to initiate navigation as if a real mouse-click had been received.`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement.click) – Jivings Oct 24 '14 at 12:35
@Jivings Please see: http://jsfiddle.net/op196786/1/ I'm not sure we are talking about same thing here – A. Wolff Oct 24 '14 at 12:35
@A.Wolff Oh! So it's just when bubbling. Totally my fault. Thanks for the correction – Jivings Oct 24 '14 at 12:39

score 0 · Answer 5 · answered Oct 24 '14 at 12:33

This may help you. Let me know. Here is the link to working demo http://jsfiddle.net/wu35uLt4/

$(function(){

    function ondynAchorClick(){
        alert('link auto clicked');
    }

     $('.clickspan').on('click', function(){

         var _anch = $('<a id="1234" href="http://www.example.com"><span>Am link now</span></a>');
         /*
           Optionally you can add a handler if you don't want to redirect
         _anch.click(ondynAchorClick);
         */
         $(this).replaceWith(_anch);    
         _anch.find('span').click();
    });

});

jquery .click() event on dynamic anchor does not work

5 Answers5