I'm trying to fire an alert when a user clicks on an anchor tag, but the alert is not being fired. The code I am trying is below.
http://jsfiddle.net/NLdTJ/
<a id="collapse"> Collapse</a>
$(function(){
$('#collapse').click(function(){
alert('here');
});
});
Your code is ok, but you weren't loading jQuery in your fiddle.
http://jsfiddle.net/NLdTJ/3/
$(function(){
$('#collapse').click(function(){
alert('here');
});
});
P.S.:
I've attached your code again because SO didn't let me post the answer with just a link to jsfiddle and no code :)
You need to have a href before a tags become hyperlinks. Otherwise they are just anchors. TO fix it you should do the following:
<a id="collapse" href="#"> Collapse</a>
$(function(){
$('#collapse').click(function(){
alert('here');
});
});
Hope that helps.
(I also assumed jQuery, but your fiddle was set up with mooTools, not sure if it was on purpose. Here is my fix: http://jsfiddle.net/NLdTJ/13/)
Make sure you prevent the default click behaviour of a link.
$(function(){
$('#collapse').click(function(e){
e.preventDefault();
alert('here');
});
});
Working sample : http://jsfiddle.net/NLdTJ/15/
<a id="collapse" href="#" onclick="alert('here');"> Collapse</a>
It should work fine, just change the framework on JSFiddle to include JQuery and run on DOMReady
There's absolutely nothing wrong with your code. It will work when you pick a jQuery library from the Framework options on the left side of jsFiddle.
Updated fiddle to include framework.
Related
Is it posible to add new element with javascript by using href and disable href at the same time?
So href only clicked once, and after that the new element will appear.
I wrote this code, but still no luck
JS
$(document).ready(function() {
$("#add_app").click(function() {
$("#box").append("<p>jQuery is Amazing...</p>");
this.removeAttribute('href');this.className='disabled';
}});
HTML
<a href="#" id="add_app" ><strong>Summon new element and disable me</strong></a>
The only does the job is in JS line
$("#box").append("<p>jQuery is Amazing...</p>");
Need help..
Thanks
--------------------------------------UPDATE---------------------------------
-Using improved code by PacMan, Linus Aronsson, and guest271314 and it works like a charm.
So basically we use .one() event handler to solve the problem.
Thanks for the feedback guys
Use this jQuery:
$(document).ready(function() {
$("#add_app").one("click", function() {
$("#box").append("<p>jQuery is Amazing...</p>");
this.removeAttribute('href');
});
});
I'm using the .one() event handler to indicate that you only want the click event to take place once. The rest of the code was more or less correct with a few small changes.
Here's a fiddle: https://jsfiddle.net/0mobshpr/1/
You can use .one(); note js at Question is missing closing parenthesis ) at click()
$(document).ready(function() {
$("#add_app").one("click", function() {
$("#box").append("<p>jQuery is Amazing...</p>");
this.removeAttribute('href');this.className='disabled';
})
});
you can try this
HTML
<a style="cursor: pointer;" id="add_app" ><strong>Summon new element and disable me</strong></a>
<div id="box"></div>
and in your JS code you can write this i have tested it and it worked fine
$(function(){
$("#add_app").one("click",function(){
$("#box").append("<p>jQuery is Amazing...</p>");
});
});
you need to return false whwn the link is click.
try this one JQuery code..
$("#add_app").click(function() {
$("#box").append("<p>jQuery is Amazing...</p>");
return false;
});
I am having trouble with my code. Specifically it is my jQuery click function. This may seem trivial, but I could not get it to respond whenever I tried to click a link. I tried to debug it, I updated to the latest jQuery. Then I put it into a Jsfiddle bin with the latest jQuery .... no dice. I honestly don't have a clue what I did wrong. I get a highlighted error on my ("nav a") jQuery selector but I have double checked with the internet and that is the proper syntax and it still won't run.
Below is my code. I cannot paste full HTML in here as it would become links as well.
$(document.ready(function(){
$("nav a").on("click",function(){
alert("What's WRONGG!");
});
});
I am using jQuery 2.1.4 on local and 2.1.3 on jsfiddle if that makes a difference. Here is the fiddle.
I believe you are missing a parenthesis on your $(document)
$(document).ready(function(){
$("nav a").on("click",function(){
alert("What's WRONGG!");
});
});
You have missed ) bracket near $(document
$(document).ready(function(){
$("nav a").on("click",function(){
alert("What's WRONGG!");
});
});
I'm trying to click a button programmatically with javascript. Using the following code works fine:
var pbutton= document.getElementById('psubmit');
pbutton.click();
but when I try it on my mobile browser it wont fire the click event. Is their another way to do this for Mobile Browsers?
You will need to implement jquery for this or use a simple javascript.
You can add following code to implement through pure javascript
document.getElementById('psubmit').click();
You can check jsfiddle here
or for jquery you can implement by
$(document).ready(function(){
$('#btn').click(function(){ alert("JQuery Running!");});
$( "#btn" ).trigger( "click" );
});
You can check jsfiddle here
For both this to work you need to have id property defined. And to implement jquery you will need to add jquery file in you code. Hope this helps. Cheers :)
You could use jQuery
$(function(){
$('#psubmit').click()
});
Try using jquery:
$('psubmit').live("click",function(){
//Function code here
});
I have a tabbed content box that when a tab is clicked, a '#div1' is appended to the end of my URL. Is there a way of preventing jQuery from doing this?
I still can't get it to work. I've made a fiddle...
http://jsfiddle.net/k6Ks8/
Sure, event.preventDefault() is what you are looking for.
http://api.jquery.com/event.preventDefault/
easy
$(function(){
$('a[href="#"]').click(function(event){
event.preventDefault();
});
});
I'm struggling to make an alert come up when an anchor tag with a specific class is clicked inside of a div.
My html section in question looks like this...
<div id="foo">
<a class='bar' href='#'>Next</a>
</div>
The jQuery section is as follows..
$('.bar').click(function()
{
alert("CLICKED");
});
My problem is that I cannot get this alert to come up, I think that I'm properly selecting the class "next", but it won't pick it up for some reason. I've also tried almost everything on this page but nothing is working. If I don't try to specify the anchor tag i.e. $('#foo').click(function()... then it works, but there will be multiple anchor tags within this div, so simply having the alert executed when the div is clicked won't work for what I need. The website this is on is a search engine using ajax to send information to do_search.php. Within the do_search.php I make pagination decisions based on how many results are found, and if applicable, a next, previous, last, and first link may be made and echoed.
EDIT: I just figured it out, it was my placement of the .next function, since it wasn't created on the initial document load but instead after a result had been returned, I moved the .next function to the success part of the ajax function since that is where the buttons will be created if they need to be, now it works.
Try using the live() command:
$(".bar").live("click", function(){ alert(); });
Because you load your button via AJAX, the click event isn't binded to it. If you use the live() command, it will automatically bind events to all elements created after the page has loaded.
More details, here
.live is now deprecated and is the selected answer for this. The answer is in the comments in the selected answer above. Here is the solution that resolved it for me:
$(document).on('click','.bar', function() { alert(); });
Thanks to #Blazemonger for the fix.
You surely missed $(document).ready(). Your code should be:
$(document).ready(function(){
$('.bar').click(function()
{
alert("CLICKED");
});
});
Hope this helps. Cheers
Make sure you have included JQuery Library properly.
Make sure your script has written between $(document).ready() in short $(function(){ });
Demo : http://jsfiddle.net/W9PXG/1/
<div id="foo">
<a class='bar' href='#'>Next</a>
</div>
$(function(){
$('a.bar').click(function()
{
alert("CLICKED");
});
});