How to Call Jquery's Click() to Follow an <A> Link If I Haven't Bound an Event Handler to It with Bind or Click Already

Can I call jQuery's click() to follow an a link if I haven't bound an event handler to it with bind or click already?

Interesting, this is probably a "feature request" (ie bug) for jQuery. The jQuery click event only triggers the click action (called onClick event on the DOM) on the element if you bind a jQuery event to the element. You should go to jQuery mailing lists ( http://forum.jquery.com/ ) and report this. This might be the wanted behavior, but I don't think so.

EDIT:

I did some testing and what you said is wrong, even if you bind a function to an 'a' tag it still doesn't take you to the website specified by the href attribute. Try the following code:

<html>
<head>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script>
$(document).ready(function() {
/* Try to dis-comment this:
$('#a').click(function () {
alert('jQuery.click()');
return true;
});
*/
});
function button_onClick() {
$('#a').click();
}
function a_onClick() {
alert('a_onClick');
}
</script>

</head>
<body>
<input type="button" onclick="button_onClick()">
<br>
<a id='a' href='http://www.google.com' onClick="a_onClick()"> aaa </a>

</body>
</html>

It never goes to google.com unless you directly click on the link (with or without the commented code). Also notice that even if you bind the click event to the link it still doesn't go purple once you click the button. It only goes purple if you click the link directly.

I did some research and it seems that the .click is not suppose to work with 'a' tags because the browser does not suport "fake clicking" with javascript. I mean, you can't "click" an element with javascript. With 'a' tags you can trigger its onClick event but the link won't change colors (to the visited link color, the default is purple in most browsers). So it wouldn't make sense to make the $().click event work with 'a' tags since the act of going to the href attribute is not a part of the onClick event, but hardcoded in the browser.

jQuery: Bind onClick to all anchors pointing to other pages with target=_self

Try this:

$(document).on('click', 'a[href][href!=""]:not([href^="#"],[href^="javascript:"],[target="_blank"])', function() {
// do something
})

But, you have to consider that it's not a very readable code to maintain. Passing a filter function (like in @Rory McCrossan answer) can be more readable.

See Fiddle

P.S Have you considered using the beforeunload event instead?

jQuery rebind click event after ajax call

use window.location to call the link href

$('#mylink').on('click',function(e) {
e.preventDefault();

$.ajax({
url: "index.php?controller=admin&action=refreshFile",
complete: function() {
console.log('control'); // This is called
window.location = $('#mylink').attr("href");
}
});
});

or with one event listeners

var eventListener = function(e) {
e.preventDefault();

$.ajax({
url: "index.php?controller=admin&action=refreshFile",
complete: function() {
console.log('control'); // This is called
$('#mylink')[0].click();
$('#mylink').one('click', eventListener);
}
});
};
$('#mylink').one('click', eventListener);

I'm not sure what your flag is supposed to do. In your example it would mean the link only works every 2nd click.

P.s. Using the complete callback means it also works even when the ajax fails. You might want to change it to success.

Update

@Racil Hilan has a point: this solution is a little overkill when you could just call the link directly and return the correct file after the refreshFile action has been called.

JQ event handler on a click

Use $(".myclickclass")[0].click()

You can directly attach an event to this new anchor.

$('body').append($('<a href = "http://www.google.de" class = "myclickclass">Test</a>')        .click(function() {            alert("Hey there");        }));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><body></body>

How to trigger uper div using jquery

Invoking the click event (which does not perform the redirect) and navigating to the href position are two different things.

Your code only invokes the click method not redirect to your given URL. To navigate the given URL see the below example. In the example, if you don't want to open the URL in a new tab you can also use window.location = $a.attr('href');.

jQuery('.hit_uper_div').click(function(event) {
var $a = jQuery('body').find('.abc a.test');
window.open($a.attr('href'), '_blank');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="abc">
<a href="https://google.com/" class="test" target="_blank"></a>
</div>

<div class="hit_uper_div">
abc
</div>

Undefined function when placing in bind event handler

Since your plugin doesn't seem to be dependent on any selector elements passed to it it would seem it is nothing more than a utlity function

Instead of creating it using $.fn.calHeader = function you could use $.calHeader= function and do:

$(".prevMonth").on("click", $.calHeader);


Related Topics



Leave a reply



Submit