My question is same as this one
I also faced the same problem which is href not triggered for event 'clicked'
.Then I changed to alt and element is span . Here is my code
<li><h2><span id='aa' alt="#inbox"><span>Inbox</span></span></h2></li>
This line is my 2nd child of ul . I want to trigger/click this line when the page is loaded.
But I want to know how to trigger this span's(#aa) click event.Following codes are tried.but not worked.
first try:
var href = $('#aa').attr('alt');
window.location.href =href; // this gave me 404 error
2nd try:
$('#aa').trigger("click") // this has no change
Edit a function will be executed when the above mentioned li>span is clicked. I want that li's span be clicked automatically when the page has loaded. this question 's answers say some problems when <a href> is used.Therefore, I used span tag instead. I use jQuery 1.6
Your first try gave you a 404 because you tried to change the URL to just #inbox. I'm assuming you actually wanted to append the hash to your current URL, in which case you can use the location.hash property:
window.location.hash = href;
I think you may also want to use an a element instead of a span, since then it will have this behaviour by default and you won't have to bind click events to handle it.
Edit :
one more thing you are pointing to url which is works for A tag not for Span tag, Jquery how to trigger click event on href element this is for A tag which you mention in your question.
there is on issue if you are triggring the click event than you should bind click event with the span than use trigger function to trigger it
Write click event
$('#aa').click( function()
{
alert('span clicked');
});
Trigger event than
$('#aa').trigger("click");
If I understood correctly, this will solve your problem;
Give clickkable propety to span like this.
$('#aa')
.bind('click', function () {
.....
});
And call it like this in document.ready
$('#Control_2').click();
I think the easiest solution is to change your spans to anchor tags to handle any clicks after load if all you want to do is to add the hash tag to the current url. Then you could just have a bit of jquery to select the link you want on page load.
<!doctype html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
window.location.hash = $('#second').attr('href');
});
</script>
</head>
<body>
<ul>
<li>First</li>
<li>Second</li>
</ul>
</body>
</html>
If that isn't what you want and you want to run more code on click then you could separate out your click logic into a function and call it on page load like this:
<!doctype html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
//your function that does stuff on click
function doStuff(item) {
window.location.hash = $(item).attr('href');
//cancel the click
return false;
}
//call the function on page load
doStuff($('#second'));
//call the function on click
$('#nav a').click(function() { doStuff(this); });
});
</script>
</head>
<body>
<ul id="nav">
<li>First</li>
<li>Second</li>
</ul>
</body>
</html>
Related
I don't understand why this isn't working. I have a table that includes a div and an image in the header. When I click on this, I want to fire the click event via a jQuery function. Here is a screenshot of the HTML:
And here is the jQuery function:
$(document).ready(function () {
console.log('ready');
$('#add_external_link').on('click',function(){
alert('clicked');
});
});
I believe that the element is in the DOM before the event is bound. The tail of the HTML looks like this (it's the 'external_link_dialog.js' file that contains the jQuery language from above):
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<script src="js/jquery.dlmenu.js"></script>
<script src="js/external_link_dialog.js"></script>
</body>
</html>
My console output shows ready as soon as the page is loaded. However, when I click that <div>, nothing happens. I see no errors, no console output, and of course no alert. Can anyone see what I am doing wrong? I've been at this for hours, and am out of ideas. Thank you!
I guess that you are appending the div after the document.ready .
If you are adding that add_external_link div dynamically, you should attach the .on("click function after appending that div.
If the div is not added dynamically, then try adding a timeout
$(document).ready(function () {
console.log('ready');
setTimeout(function(){
$(document).on('click','#add_external_link',function(){
alert('clicked');
});
},1000);
});
Depending on your CSS, the div may actually be smaller than the image you're trying to click on.
Try setting your target to the following:
$('#add_external_link img').on('click', function(){
alert('clicked');
});
Try delegating to document or the closest static element.
$(document).on('click','#add_external_link',function(){
alert('clicked');
});
I'm trying to trigger a already written click event for an anchor tag using JavaScript but it is not working. can any one please help me to do this
I have a anchor tag
<a id="memberid">Data Member</a>
<script>
$("#memberid").click(function() {
changebreadcrumb("Data Management");
});
</script>
i want to trigger above click event on load
i tried
$("#memberid").click();
and
$("#memberid").trigger("click");
but did not work.
Place this at the end of your HTML before the closing body tag
<script>
$(document).ready(function(){
$('#memberid').trigger('click');
});
</script>
DEMO
Use jquery and check whether your dom is ready. It works fine.
See the properties in the fiddle on its left side panel
$("#memberid").click(function() {
alert('clicked');
});
$("#memberid").trigger("click");
EDIT:
FINAL DEMO
If you want to triger click on pageload, use window.onload in javascript or jquery load method as i mentioned.
$(window).load(function()
{
$("#memberid").trigger("click");
});
If your click is not working then in that case....try on() function to trigger event
$(document).ready(function(){
$("#anchor_id").on( "click", function() {
//your work
});
});
I have this simple HTML page:
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"> </script>
<script>
$(document).ready(function () {
$('#test').click();
});
</script>
</head>
<body>
<a id="test" href="http://google.com">http://google.com</a>
</body>
</html>
I want to trigger a click event on the element called test on loading the page. The actual code is actually more sophisticated than that but this very basic example is not working. I checked the console log and there are no notices there.
You need to use to trigger the DOM element click
$('#test').get(0).click();
Use .get(), It retrieve the DOM elements matched by the jQuery object. As .click() will trigger the element click event handler. It will not actually click the element.
Using simple Vanialla JS
document.getElementById('test').click()
DEMO
.click() doesn't actually send a click event.
What .click() does is define something that happens when you click on the element.
The .click() you are triggering is correct but you are missing a click event for '#test' as shown :
$('#test').click(function(){
alert('here');
});
Now your complete jquery code is as shown :
<script>
$(document).ready(function () {
$('#test').click(); //or $('#test').trigger('click');
$('#test').click(function(e){
e.preventDefault();
alert('here');
window.location.href = $(this).attr('href'); //redirect to specified href
});
});
</script>
Your #test link should be bound to a function, eg:
$(document).ready(function () {
//do something on test click
$('#test').on("click", alert());
//click test
$('#test').click();
});
http://jsfiddle.net/ub8unn2b/
Here click event is triggered i.e. click event is fired on page load but you can not load href by just triggering the click event,for that you can use
window.location.href = "http://www.google.com";
I have html output in paging section like this;
<p> <strong class="active">1</strong> 2 3 Next » </p>
Now i need to add attribute "onclick" using jquery. BUt unfortunately "onclick" attribute cannot be set with jquery. At the same time i came up with an idea : taking a single anchor tag (i.e. ) and replace it by a new anchor tag (i.e. ).
How would i do it with jquery? The idea is to post the form while clicking on the paging links.
SOLVED !
Thank you all for your kind responses......I guess there was a minor mistake in my code; as i was looking through the code posted by umesh i noticed "onClick"...yes i was using "onclick" instead of "onClick". Now it has worked in FF and hopefully it will work in IE too.
you can use .replaceWith() like so:
$('a').replaceWith('<a href="javascript:void(0)" onclick="myFunction(2)" />');
Although I'd recommend looking into why it is that makes you can't set onclick attribute using jquery, if you would like to bind a click event, you can use .click()
$('a').click(function(e) {
myFunction(2);
})
Try this in jquery
$('a').click(function(){
myFunction($(this).text());
});
Value of the anchor can be used to pass the value to function myFunction. If Anchor doesn't contain any value, don't do anything.
Working Test code as below:
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
// Use Proper anchor selector on your page
$("a").each(function(){
var no=$(this).html();
if(!isNaN(parseInt(no))){
$(this).attr("onClick","myFunction("+no+")");
$(this).attr("href","javascript:void(0)");
}
});
});
</script>
</head>
<body>
<p>
<strong class="active">1</strong>&
nbsp;
2
3
Next »
</p>
</body>
</html>
Well making the assumption that you would prefer to use a click handler rather than replace your entire anchor tag, take a look at this. The only thing you need to do is return false in the click event so that the default navigation doesn't occur.
http://jsfiddle.net/2GgK3/
//if any link is clicked
$('a').click( function() {
var clickedLink = $(this).prop('href'); //get its href
console.log(clickedLink); //output to console
return false; //prevent default navigation
});
You also CAN set attributes directly in jQuery. In jQuery 1.7+ use prop. Otherwise use attr.
$('element').prop('href', 'new href value');
I am sure I could search for this if I knew the words to describe what I am looking for.
I have a link that when pressed directs the user to another anchor tag using href="#anchorTagName"... however the link also has an onclick function which makes the div visible that anchorTagName is contained within. As a result the user is never directed to the anchor tag as they fire in the wrong order.
SO how do I make the div visible first and then have the user directed to the anchor tag?
Hopefully this is what you're trying to do....
<html>
<head>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.4.2.min.js'></script>
<script type='text/javascript'>
$(document).ready(function() {
$('#theAnchorTheUserClicks').click(function(e) {
e.preventDefault(); //prevent the default click action
$('#divToShow').show('fast',function() { //show the div
$('#newText').focus(); //set the focus where you want
});
});
});
</script>
</head>
<body>
<a id='theAnchorTheUserClicks' href='#newAnchor'>click me</a>
<div style='display:none' id='divToShow'>
<a id='newAnchor'>Here I am!</a>
<input type='text' id='newText'></input>
</div>
</body>
</html>
You can use jQuery ScrollTo to scroll to the div you just made visible.
Most probably, your onclick event is preventing the default by retuning false or using event.preventDefault(). Remove that code to allow the default event to happen.
When defining the click event on page load, strip the href from the link and use the value in your click event function to change the page url after you have done your script to reveal the div.
Look at this page, maybe it will help you :)
http://blog.rebeccamurphey.com/2007/12/04/anchor-based-url-navigation-with-jquery/