CODEWITHSUNDEEP
javascriptjqueryhtml
qwaz
qwaz

Reputation: 1305

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

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].

Upvotes: 0

Views: 3117

Answers (5)

wayzz
wayzz

Reputation: 627

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 :)

Upvotes: 2

PeterKA
PeterKA

Reputation: 24648

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'.

Upvotes: 1

Naveen I
Naveen I

Reputation: 6015

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

});

Upvotes: 0

Michal Olszowski
Michal Olszowski

Reputation: 805

Try this way:

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

});

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

Upvotes: 0

Jivings
Jivings

Reputation: 23262

It looks like you want a redirect:

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

Upvotes: 0

Related Questions