如何在Jquery中使用.click（）单击超链接？

Question

I am trying to read an article but I a am bored of pressing the hyperlink "next page" and tried to run the code below.

( what is the code for : Pressing enter will find the hyperlink of class "x-hidden-focus") and click it.

The code written below worked by clicking a button when pressing enterKey for another webpage, yet it didn't work with a hyperlink .I tried to run the code that is commented but neither codes fixed my problem.

The class of the hyperlink I want to press is ".x-hidden-focus"

This is the link to the article .

$(document).keypress(function(event){
var which = (event.which ? event.which : event.keyCode);
if(which == '13'){
    //$(".x-hidden-focus")[0].click();
    $(".x-hidden-focus").click();
}
});

NOTE: I am using this code as a userscript in tampermonkey (Hope this helps).

Answer 1

You could try to simply navigate to to the href described by the link you are trying to click:

document.location = $("a.x-hidden-focus").attr("href")

Which with your code would become :

$(document).keypress(function(event){
    var which = (event.which ? event.which : event.keyCode);
    if(which == '13'){
        document.location = $("a.x-hidden-focus").attr("href");
    }
});

Based on the article you have provided we can see that the html for the button you are trying to click is the following:

<a href="adding-a-controller" data-linktype="relative-path" class="x-hidden-focus">Next</a>

However if you do press next we can see that there is now 2 buttons :

<a href="getting-started" data-linktype="relative-path" class="x-hidden-focus">Previous</a>
<a href="adding-a-view" data-linktype="relative-path" class="x-hidden-focus">Next</a></p>

And now your code would be :

$(document).keypress(function(event){
    var which = (event.which ? event.which : event.keyCode);
    if(which == '13'){
        document.location = $("a.x-hidden-focus:contains('Next')").attr("href");
    }
});

EDIT

My assumptions that the class was already present on the element was wrong.

Since the class is only added after you hover the link you would need to find the link only based on the text:

$("a:contains('Next')");

You could however be more precise by using the container class:

$("div.step-by-step").find("a:contains('Next')").attr("href")

Answer 2

The button on the documentation page is dynamically created and the class doesn't exist on it unless you click/hover it. You will need to select the button by

$('a:contains("Next")')

then get the first one of the resulting three links and take its href

$('a:contains("Next")').eq(0).attr('href') 

Now you can set the location

document.location = $('a:contains("Next")').eq(0).attr('href')

---

$(document).keypress(function(event){
    var which = (event.which ? event.which : event.keyCode);
    if(which == '13'){
        document.location = $('a:contains("Next")').eq(0).attr('href')
    }
});

Answer 3

Just need to add listener for click event like this:

$(document).on('keypress', function(e) {
  if (e.keyCode === 13) {
  $('.x-link').click(); 
}
 $('.x-link').on('click', function() {
    let url = $(this).attr('href')
    window.open(url)
  })
})

Here is example

Answer 4

As @bambam said You have to select the Link first by:

   `$('a:contains("Next")')`

Then navigate to the href described by the link by:

    $('a:contains("Next")').eq(0).attr('href')

And you can do the same for the Previous link.Your Final code would be:

$(document).keydown(function(event){
var which = (event.which ? event.which : event.keyCode);
if(which == '13'){
    document.location = $('a:contains("Next")').eq(0).attr('href')
}
else if(which == '16'){
    document.location = $('a:contains("Previous")').eq(0).attr('href')
}
});

When you press Enter Keycode:13 you go to the next page.

When you press Shift Keycode: 16 you go to the previous page.