10

I need to trigger a link click on Ajax success. The code that I currently have is:

jQuery.ajax({
//Ajax Options
success: function(value) {
    jQuery('.parent_selector').html(jQuery(value).find('.child_selector'));
    jQuery('.test-link').trigger('click');
},
error: function() {
    //alert(error);
} });

The Ajax part works fine and I am able to load the .parent_selector div with Ajax response data. After this I need to trigger a link click for which I have jQuery('.test-link').trigger('click'); in the above code. However, the link click is never triggered. To check, I moved jQuery('.test-link').trigger('click'); within jQuery(document).ready(function() to see whether the link is triggered on page load. But it does not work there as well. The next thing I tried was to put jQuery('.test-link').trigger('click'); within click event of another link, as below:

jQuery('section[role="main"]').on('click', '.another-link', function(e){
e.preventDefault();

jQuery('.test-link').trigger('click');

});

Voila!, it works within a click event of another link. So, I am really confused as to what am I doing wrong here. Why jQuery('.test-link').trigger('click'); does not want to play nice with Ajax success call?

7
  • 3
    Instead of jQuery('.test-link').trigger('click');, you can just use jQuery('.test-link').click(); Mar 14, 2012 at 14:10
  • @SKS jQuery('.test-link').click(); is behaving the same way as jQuery('.test-link').trigger('click'); No luck.
    – John
    Mar 14, 2012 at 14:33
  • 1
    Is .test-link coming back as part of your AJAX response (value)?
    – j08691
    Mar 14, 2012 at 14:44
  • @John That was a comment, not an answer. What do you do when the link is clicked? just a GET request to another page or do you have click handler? Mar 14, 2012 at 14:44
  • @SKS The .test-link is not part of the data returned via Ajax. The .test-link simply hides/unhides couple of divs for creating a tabbed effect on the page.
    – John
    Mar 14, 2012 at 16:14

6 Answers 6

4

When you use:

$(".test_link").trigger("click")
// or
$(".test_link").click()

You are executing only onclick events of the links it can be by jQuery bind or onclick attribute, but it doesn't open the page what you have in href.

So if you want to open the link which you have in href you need to so something like following:

window.location = $(".test_link").attr("href");

Other reason I can think of is you are getting the link dynamically and after getting it you are not adding any handler on the click event. jQuery "live" can solve the problem, but I would prefer to use delegate if you know what the parent container is.

0

If your link is part of the value returned from your AJAX call the click function is not bound to that object. Try using .live() to bind the function to the object instead of .click().

<script>
jQuery('.test-link').live('click', function(){
   //your function stuff
});
</script>

This will allow you to create dynamic content and not have to rebind that function everytime the link is created.

9
  • on() replaces live() in jQuery 1.7
    – Manse
    Mar 14, 2012 at 15:37
  • @ManselUK I didn't realize that was depracted. The use of .on() is different than .live(). Maybe the problem is that the event handler is not delegated properly. Direct and delegated events about a quarter of the way down.
    – Nick
    Mar 14, 2012 at 16:02
  • @Nick The .test-link isn't part of the Ajax data returned by the server. Hence, it is always present on the page and therefore would not require use of on() or live().
    – John
    Mar 14, 2012 at 16:17
  • @John Does the AJAX happen before or after the click function is defined? Also are the click function and AJAX call within the same scope?
    – Nick
    Mar 14, 2012 at 16:36
  • @Nick The Ajax happens on user interaction. By then the page has already loaded completely and the click function defined. I am not sure what exactly do you mean by within same scope? Can you please clarify.
    – John
    Mar 14, 2012 at 17:17
0
$('#test').live('click', function() {
    window.alert("works");            
});

$('#test').trigger('click');
0

Here is a working example

http://jsfiddle.net/CHUsU/1/embedded/result/

In some browsers you might get a security sandbox warning so if it doesn't work, throw the lot onto your hdd.

-Miles

-1

Just replace

 jQuery('.test-link').trigger('click');

with

 jQuery('.test-link').click();

or

$('.test-link').click();
-1

Try using $('.test-link').click()

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.