Triying to trigger click event on link

Question

This is part of my code

$('.profile-survey-link').on("click",function(e){
    e.preventDefault();
    var clickado = $(this);
    var options = {
        endpoint: 'usuario/completado',
        method: 'get',
        data: {},
        success: function(response){
            if(response == "100.00"){
                 clickado.click();
                 console.log('completo');
            }
            else{
                 console.log('no completo');
            }
        },
        error: function(){
            console.log('error');
        },
        complete: null,
    };
    Ajax.request(options);
});

The ajax call is working because the log is shown but the click event is not triggered.

$(this).trigger('click'); -> what are you trying to do here / — Akhil Aravind, Jun 08 '18 at 12:54
`$(this)` in the context of the `success` callback is undefined. — Louys Patrice Bessette, Jun 08 '18 at 12:56
If you are just binding a single function to click and trying to trigger it you should give the function a name and call it directly if possible. E.g. instead of `$("...").click(function() {})`, you can do `function thing() {} $("...").click(thing)` then just call `thing()` — Marie, Jun 08 '18 at 12:58
Debug things when they do not work so you can figure out why. `console.log(this);` would show you what you are selecting. — epascarello, Jun 08 '18 at 12:58
wow, your edit just invalidated the answers since the code inside the success changed..... Seems weird you have a click and than you call click again on the same thing.... — epascarello, Jun 08 '18 at 13:04
@epascarello: Really? I think that Ankit's answer is still valid. — Louys Patrice Bessette, Jun 08 '18 at 13:05
@LouysPatriceBessette Not when there is no longer `this` in play inside the success... — epascarello, Jun 08 '18 at 13:07
So the real question is this.... You click on a link and prevent default. After some validation, you want the default action of the link to fire, so you try clicking it again. If yes, it is a dupe of https://stackoverflow.com/questions/7999806/jquery-how-to-trigger-click-event-on-href-element — epascarello, Jun 08 '18 at 13:08
Possible duplicate of [Jquery how to trigger click event on href element](https://stackoverflow.com/questions/7999806/jquery-how-to-trigger-click-event-on-href-element) — Louys Patrice Bessette, Jun 08 '18 at 13:15

score 1 · Answer 1 · answered Jun 08 '18 at 12:55

1

Instead of using this pass an Id or correct object like:

$( "#foo" ).trigger( "click" );

answered Jun 08 '18 at 12:55

Rajat Jain

1,339
2
16
29

But the ajax call is inside `$('.profile-survey-link').on("click",function(e)...` it's for an object of a class not a concrete eleemnt – afsdi3 Jun 08 '18 at 12:57
How could you apply a click on a class? It should be a particular element. Hence id should be passed. – Rajat Jain Jun 08 '18 at 13:00
@RajatJain: That is pretty common to apply a click handler on a class. – Louys Patrice Bessette Jun 08 '18 at 13:01
In that case `.each()` should be used otherwise it will not work on all the elements. – Rajat Jain Jun 08 '18 at 13:04
I need to apply click on a particular element which is member of a class,not all the elements of a class – afsdi3 Jun 08 '18 at 13:04
2

@afsdi3 Wait! what you are trying to do. You are applying function .click and then want to trigger the click function from that same function. Sorry, But this seems wrong. – Rajat Jain Jun 08 '18 at 13:13

score 1 · Answer 2 · answered Jun 08 '18 at 12:59

You need to take the reference of this in a variable outside the ajax call so that you can use this variable to trigger click with respect to the scope of this. Something like below:

var _this = this;
$.ajax({
   success: function(response){
  if(response == "100.00"){
     $(_this).trigger('click');
     console.log('completo');
   }
   else{
      console.log('no completo');
   }

});

score 0 · Answer 3 · answered Jun 08 '18 at 13:16

In JavaScript, this points to the current function. jQuery expects an element, so $(this) is not valid.

I assume you're trying to click a button, right? In that case, there are two solutions:

Solution 1

This will work, but don't use it.

Add an ID to your button and refer to that instead. So you could have:

<button id="myButton">Click here</button>

and

$('#myButton').trigger('click');

Solution 2

Call a function you share between your button's onclick and the success handler. So for example:

<button id="myButton" onclick="buttonClick()">Click here</button>

add this as buttonClick:

function buttonClick() {
  doSomething();
}

and then, replace your $(this).trigger('click') with:

doSomething();

There are several reasons I say you shouldn't use solution 1:

In most cases you are not really interested in the click event itself, but in the code it executes.
By triggering the click event, you don't make it clear what your intention is. Solution 2 allows you to call a function that is properly named, like doCalculation or storeInfo or navigateTo or whatever applies. This makes it easier to understand the code a few months from now.
What happens a year down the line when someone (maybe even you) make changes to what the button click does? Then that automatically happens in both places, whether appropriate or not. It could lead to subtle bugs.

Triying to trigger click event on link

3 Answers3