How to disable anchor element on load using jquery? - javascript

In my project , there is one anchor element as follows.
TRY NOW
I just want to disable the above anchor element when page completely loads. Actully I have used removeattr property of jquery. But I only want to disable the anchor element without removing onClick() event. So please help me in this question.

You say you'd like to keep your existing attribute handler. I suppose you're talking about handler definition, but not its processing, because that's what you're trying to prevent.
Solution 1: remove attribute completely
$(function(){
$(window).load(function(){
$("a").removeAttr("onclick");
});
});
Solution 2: change attribute code
$(function(){
$(window).load(function(){
var link = $("a");
var existing = link.attr("onclick");
link.attr("onclick", "return;" + existing);
});
});
Solution 3: change attribute but store definition
$(function(){
$(window).load(function(){
var link = $("a");
var existing = link.attr("onclick");
link.attr("data-onclick", existing)
.removeAttr("onclick");
});
});
This JSFiddle shows all three solutions. I've written it so that it doesn't change links on page load but rather simulates page load by clicking a link. Click any of the first three links first then simulate page load and click any link again and you'll see that all of them work.

You can try this
Using CSS
a{
pointer-events: none;
}
Dynamically using jquery
$(document).ready(function(){
$('a').css('pointer-events','none');
});

write script like below
$(window).load(function(){
$("a").removeAttr("onclick");
});

Related

making a link using jquery on images

I have a code where i need to create a href link to the images too. with the following screenshot
http://prntscr.com/iqo2ad
i tried it something like this:
$(document).ready(function() {
var link = $(".car-image").find('li:first').find('a').attr('href');
var appendtoimg = $('.car-image').closest('.img-responsive') - here i am stuck as i need to add an onclick event so it can work same as like <a> tag
});
If you're using jquery you can add a click event listener.
$(".car-image").click(function(){ });

How to use jquery on iframe?

I have button within iframe that needs to clicked after the page is loaded. How to do it? I have tried using Jquery but trigger event but something is missing.
jQuery(document).find('iframe').each(function() {
var sel = jQuery(this).attr('__idm_frm__');
find('cbe_searchcontainer a').click();
});
$('iframe').contents().find('#cbe_searchcontainer a').each(function() {
$(this).trigger("click");
})
Is this what you're looking for?
If cbe_searchcontainer is ID, may be you should change it to #cbe_searchcontainer to make a correct jQuery selection.

jquery .click() event on dynamic anchor does not work

I have a <span class="clickspan">Some text here</span>
What I'm trying to do is when the span is clicked a dynamic anchor is created for the clicked span and then click event is triggered with jquery on the dynamic anchor.
$('.clickspan').on('click', function(){
// Method 1: Replace span with dynamic anchor
$(this).replaceWith('<a id="1234" href="www.example.com"></a>');
// None of the following works
$('#1234').trigger('click');
$('#1234').click();
// Method 2: Insert dynamic anchor inside the span
var theSpan = $(this).wrapInner('<a href="'+data.msg+'" donwload></a>'),
anch = theSpan.find('a');
// this click event on the dynamic anchor inside the span causes the click
// event on the parent span and to run the entire script all over again.
anch.click();
});
I've been struggling with this for a while and exhausted all ideas, so I'd appreciate any suggestion.
SOLVED
The method and the source suggested by #Ninsly in the comment below fixed the issue. The following worked:
$('#1234')[0].click();
Sorry for taking everybody's time. I was not aware of the need to use [0].
After creating the <a> tag bind the .click event to it then use the $('#1234')[0].click();.
Sometimes when you create dynamic html you have to then bind the events to the html you are creating.
Hope it helps :)
Method 1 works just fine, only you have to trigger the click event on the DOM element, not the jQuery object.
$(function() {
$('.clickspan').on('click', function() {
var anch = $('<a id="1234" href="http://harvest.com"></a>');
$(this).replaceWith(anch);
anch[0].click();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="clickspan">Some text here</span>
SPECIAL NOTE:
Most sites no longer allow display in a frame .... therefore the snippet might not show the site. See console output:
Refused to display 'https://www.google.com/' in a frame because it set 'X-Frame-Options' to 'SAMEORIGIN'. js:1
Refused to display 'https://www.yahoo.com/' in a frame because it set 'X-Frame-Options' to 'DENY'. js:1
Refused to display 'https://twitter.com/' in a frame because it set 'X-Frame-Options' to 'SAMEORIGIN'.
It looks like you want a redirect:
$('.clickspan').on('click', function(){
document.location.href = 'http//example.com';
});
Try this way:
$(document).on("click", '.clickspan', function(){
});
If elements are added dynamically you have to bind use listener on a hole document.
This may help you. Let me know. Here is the link to working demo http://jsfiddle.net/wu35uLt4/
$(function(){
function ondynAchorClick(){
alert('link auto clicked');
}
$('.clickspan').on('click', function(){
var _anch = $('<a id="1234" href="http://www.example.com"><span>Am link now</span></a>');
/*
Optionally you can add a handler if you don't want to redirect
_anch.click(ondynAchorClick);
*/
$(this).replaceWith(_anch);
_anch.find('span').click();
});
});

Set a JQuery function on the button HTML declaration

I'm trying to use AJAX loading a set of sucessive pages in a main page, as I show you in the next picture:
I learned (thanks to this community!) to call other pages' content, by assigning the load() function to the onclick event of a button, like this:
$(document).ready(function() {
$('#btn').click(function() {
$('#result').load('./poi-data-no-heading.html');
});
});
But what if I have one button with id="btn" on every page? The functionality of any button with that id will be the same always, because (I think) the document.ready is not triggered when I use the load() method, so it's never replaced with new functionality.
E.g. initial functionality should be navigate from page 1 to page 2, and when page 2 is loaded, the functionality should be to navigate from page 2 to page 3.
As Js developer, I would do the following:
<!-- In the HTML file -->
<button id="btn" onclick="loadContent()">Load</button>
<div id="result"></div>
/* In the JS file */
function loadContent(){
/*the code to retrieve content*/
$('#result').load('http://fiddle.jshell.net/webdevem/JfcJp/show/');
}
This way I could assign the functionality to every button, no matter what's the ID or if the document.ready is triggered. But mixing Js with JQuery is not an option... So, how do you think I should manage to do something similar with JQuery?
Thanks in advance.
P/d: Here is a useful fiddle I used to try ideas: http://jsfiddle.net/gal007/vkcug7t7/1/
You could use the on() event from jQuery, which can listen for events on elements dynamically rendered (you can't do that with the click() method). So in this case you have to listen to the event on a parent element, one that doesn't change with the load method. On that button, use an HTML5 data-* attribute to define the id that you wish to load.
HTML:
<btn id="result" data-load-id="1">Load</btn>
Javascript:
$('#container').on('click', '#result', function() {
var id_to_load = $(this).data('load-id');
load('/url?' + id_to_load);
});
I've updated your fiddle : jsfiddle

JQuery click event, not working

I have the following scenario.
I have a index.php page with the following JQuery code included
jQuery(document).ready(function(){
jQuery('#sIMG img').click(function() {
var currentSRC = jQuery(this).attr('src');
var altSRC = jQuery(this).attr('title');
var imgID = jQuery(this).attr('id');
var cat = jQuery(this).attr('name');
/*Fade, Callback, swap the alt and src, fade in */
jQuery('#main').fadeOut('fast',function() {
jQuery('#main').load("detail.php?id="+imgID+"&category="+cat);
jQuery('#main').fadeIn('fast');
});
});
});
Now I have two div tags called #main and #right in the index.php page. When I click on a menu item right changes to a bunch of images, if I click on one of those images the above code should take effect and load into the main div, but it's just not working. the images are located within a div called sIMG. Any help will be appreciated
Try using live
jQuery('#sIMG img').live("click",function(){
});
As of jQuery 1.7, the .live() method is deprecated. Use .on() to attach event handlers.
jQuery('#sIMG img').on("click",function(){
});
I think what you're doing is setting "click" on the array that is return there. Try this:
jQuery('#sIMG img').each(function() {
jQuery(this).click(function() {
});
});
One of the reasons that the jquery click don't work is that you have dupplicates id's in the form.

Categories