We have legacy pages which have links where target="_blank". On clicking these I'd like to ignore that and run a some JavaScript I have for opening windows.
Is this possible with jQuery, if so what methods/terms should I research?
Thanks in advance
Just use event delegation to prevent the links with target="_blank" from working, example:
$(document).on('click', 'a[target="_blank"]', function(event) {
event.preventDefault();
alert('Prevented');
});
$('a[target=_blank]').click(function(e){
e.preventDefault();
//do what you want here
});
Demo: http://jsfiddle.net/kkhNr/1/
Try this
$('a[target=_blank]').click(function(event) {
event.preventDefault();
// Now make a call to your own function
});
I just wanted to point out that #Roger C's listener is a better solution...if you have any dynamically loaded content on your page (i.e. AJAX or AngularJS single page applications).
This listener listens to the document's clicks and will pickup newly added content without needing to re-add the listener after content changes:
$(document).on('click', 'a[target="_blank"]', function(event) {
event.preventDefault();
alert('Prevented');
});
This listener listens to all selectors found at the time it was called (possibly missing any newly added content):
$('a[target=_blank]').click(function(e){
e.preventDefault();
alert('Prevented');
});
Related
I don't know how to create an asp in fiddle but I created the JS.Please check the link .Imagine I have a button(button id: button2) on (src : 'ccc.de';), and when i click that button(in ccc.de) I should catch the event in js
My actual src page is not ccc.de, my src page contains an asp with a button(button id: button2) on it.
Thank you in advance
Your question has no relation to angular or JSON for that matter.
If you want to attach an event listener to your button, you can try preventing the default action of the button by doing something like this.
$("#btn").click(function(e){
e.preventDefault();
function_to_call();
});
You can do it using event delegation
$(document).ready(function() {
$(document).on('click', "#button2", function() {
alert("button2 clicked");
});
});
//instead of document in click event, you should use parent of $button2
Or you can use
$(document).ready(function() {
$( "#button2").on('click', function() {
alert("button2 clicked");
});
});
Your code are ASP code, or ASP.NET WebForms, maybe ASP.NET MVC?
At fiddle (https://fiddle.sencha.com/#fiddle/14bj) I see iFrame. Remember, if your button in iFrame, and your code with setting event handler in owner document, you should search button for setting your event inside of iFrame. It's will be not fount in parent document. Maybe problem is here. If you have PostBack (or another things, that reloads page), and button2 inside iFrame, then botton2 event handler will be lose after iFrame reloading. So, you will need set listener for event again, because it will be new button2 after reload (inside iFrame).
If you use ExtJS, then better set event on ExtJS button by component config. Somethin like this:
Ext.create('Ext.Button', {
text: 'Button2',
renderTo: Ext.getBody(),
handler: function() {
alert('You clicked the button 2!');
}});
Here example with two ways: https://fiddle.sencha.com/#fiddle/14hs
For better understood of your problem, culd you provide full code of this pages (if you couldn't use fiddle for asp, use http://pastebin.com/ or another service of posting sources).
I hope I wrote something helpfull (but not shure). Good luck!
I am using following code on my page which I am loading in ajax.
$(document).ready(function() {
$('#button_id').click(function() {
//Do Something
});
});
Now When I click on the button action happens multiple times. I know that its happening because I am loading the ajax page multiple times.
Please help me solve this.
You can use .off() to remove existing listeners:
$(function() {
$('#button_id').off('click').click(function() {
//Do Something
});
});
If I am wrong about your implementation I apologize. Your problem may exist because the binding is created on first page load and then on subsequent ajax loads with new scripts being inserted and creating duplicate bindings. You should prevent any bindings from being generated on ajax loads to prevent duplicate bindings unless you are good with cleanup.
If the button you are clicking on exists in the ajax loaded area then you should use delegation to ensure that the click handlers still work.
For example:
$( "body" ).on( "click", "#button_id", function() {
//do something
});
This will add a binding to the body element, but more specifically to the id #button_id. A click event on the button will propagate and bubble up to the body element (or whatever parent element you choose).
This makes it so that dynamic elements can be inserted in the DOM and only one event handler is needed to listen for it.
No need for .on() or .off() calls for individual ajax loads. This allows your bindings to be much cleaner.
Of course, if your button is not likely to exist on the page all the time then it would not be a good idea to keep extra bindings. Only create these types of binding if they are always needed to prevent optimization issues.
A cleaner solution would be to remove that code from the ajax loaded HTML and use one single event handler in the master page
I guess your problem is the event is firing many times.
To fire only once try this:
$(document).ready(function() {
$('#button_id').on("click",function(e) {
e.preventDefault(); // This prevents the default non-js action (very used for anchors without links or hashes)
e.stopPropagation(); // Prevent the bubling of the event and spread more times
//Do Something
});
});
If doesn't work with e.stopPropagation(); try with e.stopInmediatePropagation();
Adding documentation for the last method I suggested. It could solve your problem.
http://api.jquery.com/event.stopimmediatepropagation/
I have a small issue. So i have a php page whose content return a button using ajax such as shown below:
HTML part:
<a href="#" class="unit_register_button">
Register
</a>
jQuery part:
$('a.unit_register_button').click(function(e){
e.preventDefault();
alert('yaay');
});
Problem:
The button does not respond to the jQuery.
I have tried copying the exact line of html with the button to the page directly and works perfect when I click.
What is the solution and why does the button not work when it is displayed using ajax?
you should use event delegation for that
$(document).on("click","a.unit_register_button",function(e){
e.preventDefault();
alert('yaay');
});
Event delegation allows you to attach a single event listener, to a parent element, that will fire for all children matching a selector, whether those children exist now or are added in the future.
There is couple ways, one of them is by using on function:
$(document).on('click', 'a.unit_register_button', function(e){
e.preventDefault();
alert('Alert message');
});
And another is with delegate function:
$(document).delegate('a.unit_register_button', 'click', function(e){
e.preventDefault();
alert('Alert message');
});
Here jsfiddle with working examples.
Hope this helps.
How do I make jquery click test
<script>
// this wont work
$('#mylink').trigger('click');
</script>
Please can you help
If your intention is to navigate to the specified URL as if the user had clicked the link try calling the DOM .click() method instead of the jQuery .click() method:
$('#mylink')[0].click();
The jQuery .click() will call event handlers that you've bound but not cause the default click behaviour.
$(document).ready(function(){
$('#mylink').trigger('click');
});
You need to trigger the default click method, not the one by jQuery. This can be done by adding the default click option within a click event of jQuery using this.
This is how the JavaScript looks. It basically creates the event when the DOM is ready, and clicks it intermediately, thus following the link.
$(function() {
$('a').click(function() {
// 'this' is not a jQuery object, so it will use
// the default click() function
this.click();
}).click();
});
To see a live example (opening about.com), see: http://jsfiddle.net/8H9UX/
You need to wait until the DOM has finished loading. This can be done with jQuery. The anonymous function is run at page load once all the elements are available in the DOM.
<script>
$(function() {
$('#mylink').trigger('click');
});
</script>
Just click:
$("#mylink").click();
If your scripts are in the head then you need to ensure that the element exists, so the script should be executed when document is ready.
$(document).ready(function () {
$("#mylink").click();
});
try this
setTimeout(() => {
$("#mylink")[0].click();
}, 500);
If you are expecting the file to get downloaded, it will not happen becauer trigger() will not trigger the default event.
document.getElementById('mylink').click();
trigger('click') will fire the click event but not the default one.
$('a').click(function(){ alert('triggered') }) // this will be fired by trigger
use the following way.... since you want to download the file prevent the link from navigating.
$(document).ready(function() {
$('#mylink').click(function(e) {
e.preventDefault(); //stop the browser navigating
window.location.href = 'test.zip';
});
});
your above code will not work because you have assigned value in href and then you want some operation onclick of this anchor tag.
test
first of all you have assigned .zip to href. So it will open zip file onclick first and will not trigger any other operation in onclick trigger.
so whatever operation you want to do , perform it first then open .zip
use code like below
test
$('#mylink').click(function(){
// do your operation here
// now open zip
});
I am using jQuery light box plugin (found here: http://leandrovieira.com/projects/jquery/lightbox/)
I am wondering if there is a way to detect when the image is loaded so i can reinstate my selectors?
The problem is my stript:
$('#download').click(function(e) {
e.preventDefault();
//do other stuff when a click happens
});
Does not work on the link that is loaded into the 'title' area of the lightbox.
Please Help
Thanks :)
if you're using jQuery 1.3 or later, you can use jQuery.live
$('#download').live("click", function(e) {
e.preventDefault();
//do other stuff when a click happens
});
It will attach a click handler to the #download link, even if the link created in the future.
I think you may be looking for
$('#download').live('click', function(e){
e.preventDefault();
//do other stuff when a click happens
});
#download will not be loaded into the DOM if you are creating it after the page has been loaded