i am a bit new to using jquery, the following should display a button, and when someone clicks the button, the font size of that button should change.
Unfortunately, the button does not change its font size, for reasons i am not sure of.
Edit:
this example is the same one as before with adjustments, it works but it will only change font, once the mouse has left the button's area or if the button has be double clicked.
The font should change on only 1 click.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
$(".button0").click(function() {
$('.button0').css('font-size', '43px');
});
});
</script>
<style type="text/css">
.button0{
position:fixed;
left:48px;
top:55px;
font-family:Arial;
font-size:8px;
font-weight:normal;
}
</style>
<body>
<div name="button0"><input class="button0" type="button" style="width: 148px;height: 72px;" value="Button"/></div>
</body>
</html>
By the time .click is called, the DOM hasn't fully loaded. You should wrap it in a DOM ready function.
$(function() {
$(".button0").click(function() {
$('.button0').css('font-size', '43px');
});
});
Also noted its not a div.
You have to make sure the document is ready—as in, all elements have loaded—before making modifications.
Wrap everything in this function:
$(document).ready(function(){
// your code here
});
Besides that, your selector is looking for a div element with a class of button0 when you're trying to modify an input element. Modify your selector to say input.button0.
Also, jQuery has a $(this) selector which selects the current element. In your case it will select the clicked input.
And finally, since you're using jQuery 1.7.1, I'll introduce you to on(). It's generally recommended to delegate events using this function. Instead of $(div).click(), use this:
$(document).on("click", "input.button0", function(){
$(this).css("font-size", "43px");
});
More about on() here.
Why are you using div.button0. The element isn't a div. try just .button0.
That is because the javascript is executed as soon as it is encountered; so it is executed before the button is rendered.
Change the order and it'll work.
<input class="button0" type="button" style="width: 148px;height: 72px;" value="Button"/>
<script type="text/javascript">
$(".button0").click(function() {
$('.button0').css('font-size', '43px');
});
</script>
jQuery also includes a domready event for this, which means the javascript will be parsed before the button but will only be executed when the button is there. This way, you can still put the javascript in the head, if you'd really want to. To do this, just wrap the existing code in
$(function() {
/*code*/
});
Need to properly fire off the event for attaching .click()
<script type="text/javascript">
$(document).ready(function() {
$(".button0").click(function() {
$(this).css('font-size', '43px');
});
});
</script>
Note the class name .button0 as it is NOT in a DIV as you previously used.
use it like this
$(document).ready(function(){
$("div.button0").click(function() {
$(this).css('font-size', '43px');
});
});
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');
});
So, I'm having trouble with clicking events on elements, that were rendered by .html() function of jQuery.
Here's my code I'm testing with:
<html>
<head>
<title>Test</title>
<script type="text/javascript" src="static/jquery-2.0.3.min.js"></script>
</head>
<body>
<div id="content">
<input type="submit" name="loginButton" id="loginButtonID"/>
</div>
<script>
$('#loginButtonID').click(function() {
$('#content').html('<button name="loginButton" id="newPasswordID">New Button</button>')
});
$('#newPasswordID').on('click', function() {
alert("alert");
});
</script>
</body>
</html>
As you can see, at the very beginning, I render a button with id="loginButtonID". I have .click() event on it, that creates in its turn another button by .html() (since .text() will return just HTML-code of that button) with id="newPasswordID" and for that button I have another event .on() as it should be (not .click()), but that event just doesn't work. So the question is: how to make that .on() event work for the second button?
Thanks.
The problem is that the #newPasswordID element doesn't exist as of when you try to hook the event. So since when you do $("#newPasswordID") it doesn't match anything, no handler is set up.
You can either do that after you render that element, or you can hook the event on some container that the element goes in (looks like #content) and use event delegation:
$("#content").on("click", "#newPasswordID", function() {
// ...
});
Since that really hooks click on #content, but then only fires it if the event travelled through an element matching #newPasswordID, it doesn't matter whether #newPasswordID exists as of when you hook up the event or not.
Try this:
$('#content').html(
$('<button />').attr('name',"loginButton")
.attr('id', "newPasswordID")
.click(function() {
alert('alert');
})
);
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>
I simplified my code for next example. So, please don't be wondered why I'm using ajax here.
<!DOCTYPE>
<head>
<style>.not { background:yellow; }</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
$(document).ready(function() {
$(".not").click(function(e){
e.stopPropagation();
alert('good');
});
$(".click").click(function(e){
$.post('page2.php', 'q=1', function(data){
$('body').append('<p class="click">Click here to add new paragraph <span class="not">[not here]</span></p>');
}, "json");
});
});
</script>
</head>
<body>
<p class="click">Click here to add new paragraph <span class="not">[not here]</span></p>
</body>
New rows don't make any alert for class=not! It is inexplicably for me :'(
Thanks for unswer!
Assuming jQuery 1.7.x, use this:
$(document).on('click', ".not", function(e){
alert('good');
}).on('click', ".click", function(e){
if(!$(e.target).is('.not')) {
$('body').append('<p class="click">Click here to add new paragraph <span class="not">[not here]</span></p>');
}
});
The problem is, .click will only bind to elements that exist when it's called. Using .on the way I'm suggesting delegates the click handling to the document element. By passing a selector as the second argument, you tell jQuery to run the event handler only if the event target matches the selector.
Put the $(".not")... part inside a function, such as disableNot = function() {$(".not").click......}. Then, after appending the new paragraph, call disableNot() to update the event handlers. (Also call disableNot immediately after defining it, so any .not elements already on the page are given their handlers.)
In your ready event handler, you use $('.not).click. click is an alias for bind, and bind only works on elements that are already in the DOM.
If you're using jQuery 1.7, you can use on instead, in its delegate-like form.
I am trying to make a form with some dynamic behavior. Specifically, I have my inputs in divs, and I would like to make it so when the user clicks anywhere in the div, the input is selected. I was using JQuery 1.2.6 and everything worked fine.
However, I upgraded to JQuery 1.3.2 and I am getting some strange behavior. When I click on any of the inputs, I get a delay before it is selected. My Firefox error console gives me several "too much recursion" errors, from within the JQuery library. I tried the page in Internet Explorer 7 and got an error saying "Object doesn't support this property or method".
Am I doing something wrong, or is this a bug in JQuery? Does anyone know a way to fix this behavior, without going back to the old version? I am using Firefox 3.0.7 in case that matters. Here is a simple example I made to illustrate the problem:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>quiz test</title>
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
</head>
<body>
<div class='question'>Favorite soda?
<div><input type='radio' name='q' value='A' id='a'><label for='a'>Coke</label></div>
<div><input type='radio' name='q' value='B' id='b'><label for='b'>Pepsi</label></div>
</div>
<script type="text/javascript">
$(function() {
$(".question div").click(function() {
$(this).children("input").click();
});
});
</script>
</body></html>
$(function() {
$(".question div").click(function() {
var radio = $(this).children("input")[0];
radio.checked = !radio.checked;
});
});
ya, click event bubbles up… so when you raise $(this).children("input").click(), you are raising $(".question div").click() again, and so on.
Why do you need to do this if you are using <label for=""> already? Clicking on the label should activate the radio control anyway.
[Edit:] Following up on your comment, you can do it this way:
Make the label display as a block element, apply all styles you have used for the div wrapping the field.
.question label { display:block }
and then use this layout. You can get rid if the divs too.
<label><input type="radio">Coke</label>
<label><input type="radio">Pepsi</label>
Only fire click() when the event's target is the div, ie
$(function() {
$(".question div").click(function(event) {
if($(event.target).is('div'))
$(this).children("input").click();
});
});
I had the same problem when I was going to make my div submit it's child input:submit. This will solve the problem:
$(function() {
$(".question div").click(function() {
$(this).children("input").click(function(event){
event.stopPropagation();
});
$(this).children("input").trigger("click");
});});
The problem (as grilix said) is the event "bubbling up" the DOM, so, there's an easy solution to that, you just need to cancel that bubble effect.
Bubble refers to (plain english) an event being triggered on ALL the elements that are affected because of it's position within the document. So, in your example, the "click" event is received by (in this order) the BODY, then the parent (.question) DIV, then the other DIV and finally by the INPUT.
To do that bubble cancel, you can go the jQuery way by calling the stopPropagation method within your callback function, like this:
$(function() {
$(".question div").click(function(event) {
$(this).children("input").click();
event.stopPropagation();
});
});
The plain javascript way would require you to use the cancelBubble method, but I guess it is outside the scope of your question.
Greetings,
Manolo
<script type="text/javascript">
$(function() {
$(".question div").click(function() {
$(this).find("input").attr("checked", "checked");
});
});
</script>
PS: It was recursing too much probably because you were stopping the propagation of divs' clicks, not the inputs' clicks.
I dont remember about how to check radios with jQuery, but could be like this:
<script type="text/javascript">
$(function() {
$(".question div").click(function() {
$(this).children("input").checked(true);
// or
$(this).children("input").checked= true;
});
});
</script>
I know this may be not the answer at all, but i am writing it as it happened to me before:
It gave me “too much recursion” error while i was using jquery and prototype in the same project and also this may happen with ajax.net with jquery, so make sure that there is no conflict between libraries if you are using more than one.
Thank you all. I tried grillix's idea of setting the checked attribute, although I had to fix up the syntax a little bit. Here is what I did:
$(this).children("input").attr("checked", true);
It works, but I am still curious as to why my previous way stopped working with JQuery 1.3.2. I know about the changes in event bubbling behavior, but why can't I fix that by calling "event.stopPropagation()" or "return false" within my callback?