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
Change Values in Array When Doing Foreach
Switch Statement for Greater-Than/Less-Than
React-Router - Pass Props to Handler Component
Looping Through an Object (Tree) Recursively
How to Check If an HTML Element Is Empty Using Jquery
How to Prevent Page from Reloading After Form Submit - Jquery
JavaScript Onclick Event Over Flash Object
Change Text Color Based on Brightness of the Covered Background Area
Image Manipulation and Texture Mapping Using HTML5 Canvas
Get Average Color of Image via JavaScript
Difference Between Knockout View Models Declared as Object Literals VS Functions
How to Make Exe Files from a Node.Js App
How to Make JavaScript Object Using a Variable String to Define the Class Name
Why Does (0 < 5 < 3) Return True
Ajax Jquery Refresh Div Every 5 Seconds