I have a button on my HTML document as listed below
<input type = "submit" value = "Manuals and Coaching Tools" class = "col-sm-1" style="white-space:normal;" id = "mac">
And I have this block of jQuery at the bottom of the document. It is supposed to fade in the div with the id "gold" when the button is clicked.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js">
$(document).ready(function () {
$('#mac').click(function(){
$('#gold').fadeIn('slow');
});
});
</script>
However the code does not seem to work/trigger and nothing happens. Any suggestions to why this is happening is greatly appreciated.
Note: display: none is applied to the "gold" div in css, but I want the div to fade in once the button is clicked.
Split up your script tags:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script>
$(document).ready(function () {
$('#mac').click(function(){
$('#gold').fadeOut('slow');
});
});
</script>
Edit: JSFiddle
Here is working example:
$(document).ready(function () {
$("#mac").click("input", function(){
$('#gold').fadeOut('slow');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type = "submit" id = "mac"value = "Manuals and Coaching Tools" class = "col-sm-1" style="white-space:normal;">
<div id="gold">Some content</div>
Change your javascript like this.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#mac').click(function(){
$('#gold').fadeOut('slow');
});
});
</script>
If your div#gold is display:none;
you need to update your jQuqery to fadeIn("slow")
$('#mac').click(function(){
$('#gold').fadeIn('slow');
})
try this
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<input type = "submit" value = "button" class = "col-sm-1" style="white- space:normal;" id = "mac">
<div id="gold" style="display:none">
hello
</div>
<script>
$(document).ready(function () {
$('#mac').click(function(){
$('#gold').fadeIn('slow')
});
});
</script>
Related
I'm trying to get the button to toggle between showing text in different languages. When I click the button nothing happens, can someone help out please?
$(document).ready(function() {
$('[lang="jp"]').hide();
$(document).on('click', '#switch-language', function() {
$('[lang="en"]').toggle();
$('[lang="jp"]').toggle();
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="switch-lang">Switch Language</button>
<p lang="en">eigo</p>
<p lang="jp">en japon</p>
You have a typo in your Selector.
$(document).ready(function() {
$('[lang="jp"]').hide();
$(document).on('click', '#switch-lang', function() {
$('p[lang="en"]').toggle();
$('p[lang="jp"]').toggle();
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="switch-lang">Switch Language</button>
<p lang="en">eigo</p>
<p lang="jp">en japon</p>
No element has "switch-language" as the ID. When you change it to the correct value, "switch-lang", it works.
Hello i'm trying to add an event of click on a button when the user click a label,
its working fine but the user have to click on the label twice i need to make it work from the first click
this is my function :
(function($){
$('.next-on-click .forminator-checkbox-label').on('click', function() {
$('button.forminator-button.forminator-button-next').trigger('click');
});
})(jQuery);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<lable class="next"> Next </lable>
<button class="check">Check</button>
<script>
$('.next').click(function() {
alert("Hi");
$('button.check').trigger('click');
});
</script>
example:
$('.next-on-click .forminator-checkbox-label').on('dblclick', function() {
$('button.forminator-button.forminator-button-next').trigger('click');
})
So why would you need JavaScript to handle the click? Adding an for attribute on a label will click the button.
$("#btn").on("click", function () {
console.log("clicked");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label for="btn">Label</label>
<button id="btn">Button</button>
This question already has answers here:
Event binding on dynamically created elements?
(23 answers)
Closed 6 years ago.
I used the append method in jQuery to generate some HTML input boxes; now I want to make some effects on those input elements using jQuery but I can't. This is a little example of what I wanna do.
<style type="text/css"></style>
<style>
.focus
{
background-color: green;
}
</style>
<script src="alu_afric/Java/java.js"></script>
<script>
$(document).ready(function() {
$("button").click(function() {
$("#newHTML").append('<input type="text" placeholder="some text .."/>');
});
$("input").focus(function() {
$(this).addClass("focus");
});
});
</script>
<button>Click</button>
<body>
<div id="newHTML"></div>
</body>
The event listener should be
$( document ).on( 'focus', 'input[type=text]', function() {
Instead of
$("input").focus(function(){
Please check snippet for more understanding.
$(document).ready(function(){
$("button").click(function(){
$("#newHTML").append('<input type = "text" placeholder = "some text .."/>');
});
$( document ).on( 'focus', 'input[type=text]', function() {
$(this).addClass("focus");
});
});
.focus
{
background-color: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>Click</button>
<body>
<div id = "newHTML"></div>
</body>
If you use the appendTo method instead you can store your input-element in a variable and make changes to it.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<style = "txt/css"></style>
<style>
.focus
{
background-color: green;
}
</style>
<script src = "alu_afric/Java/java.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
var input = $('<input type = "text" placeholder = "some text .."/>');
input.appendTo("#newHTML");
input.css('background', 'red');
});
$("input").focus(function(){
$(this).addClass("focus");
});
});
</script>
<button>Click</button>
<body>
<div id = "newHTML"></div>
</body>
Yes you can. As long as you append html first then bind the event you want for it.
$(document).ready(function(){
$("button").click(function(){
//for safe calling lets add a class
$("#newHTML").append('<input type = "text" placeholder = "some text .." class="inpt-class"/>');
//after the input is add to the page add an event for it
// either use or .on() or .focus()
$("input.inpt-class").focus(function(){
$(this).addClass("focus");
});
});
});
I want to use Jquery Attr.Radio Button click and write to #RadioDesc id's div...
<input type="radio" desc="sample description" class="AddText">
<script type="text/javascript">
$( document ).ready( function() {
$("radio").click( function() {
$("#RadioDesc").attr("desc");
});
});
</script>
<div id="RadioDesc"></div>
These codes not work...Please help me solutions...
your selector is invalid, change:
$("radio").click(function(){
to
$( document ).ready( function() {
$(":radio").click( function() {
//add to html
$("#RadioDesc").html($(this).attr("desc"));
});
});
Html:
<input type="radio" desc="sample description" class="AddText">
<div id="RadioDesc"></div>
Js:
$(document).ready(function() {
$("input[type=radio]").click(function(){
$("#RadioDesc").text($(this).attr("desc"));
});});
Working Fiddle
The radio selector is :radio
$(document).ready(function () {
$(":radio").click(function () {
$("#RadioDesc").html($(this).attr('src'));
});
});
Your selector isn't targeting the radio, its targeting an element radio
try this:
$('input[type=radio]')
You should change div's html to radio's attribute value
<input type="radio" desc="sample description" class="AddText">
<div id="RadioDesc"></div>
<script type="text/javascript">
$( document ).ready( function() {
$("input:radio").click( function() {
$("#RadioDesc").html( $(this).attr("desc") );
});
});
</script>
http://www.frostjedi.com/terra/scripts/demo/jquery01.html
Clicking the button on that page should unhide the "hello, world!" div tag shouldn't it? When I click it I get a $("#demo").style is undefined error.
$("#button").click(function () {
$("#div").hide();
});
$("#button").click(function () {
$("#div").show(2000);
});
Try this , the simplest one ..
<input type="button" onclick="$('#demo').toggle()" value="clicking me should unhide a div tag">
You should use
$('#demo').show(); // to display
or
$('#demo').hide(); // to hide the div
try .show()
$("#demo").show()
You cannot access properties of jQuery objects by . (dot) (They are not javascript objects)
You this,
$('#demo').css({'display':'none'})
Or you can use $('#demo').hide(); (Its a shortcut)
jQuery.hide() is very slow.
Use the following instead:
document.getElementById('demo').style.display = 'none'
This is where you heard of the style property. This property works on DOM objects. jQuery objects are not DOM objects.
Use the hide() method
$("#demo").hide()
or
$("#demo").hide()
or even the toggle() method to toggle visibility:
$("#demo").toggle()
Integrated in your example:
<html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<body>
<div>
<input type="button" onclick="javascript:$('#demo').show();" value="clicking me should unhide a div tag">
</div>
<div id="demo" style="display: none">hello, world!</div>
</body>
</html>
Example from jQuery documentation:
<h1 class="firstHeading" style="display: block;">Tutorials:Basic Show and Hide</h1>
<div class="examples">
<input id="hideh1" type="submit" value="Hide site tile" name="hideh1">
<input id="showh1" type="submit" value="Show site title" name="showh1">
<input id="toggleh1" type="submit" value="Toggle site title" name="toggleh1">
</div>
<script type="text/javascript">
$(document).ready(function () {
$(document).ready(function () {
$('#hideh1').click(function () {
$('div.showhide,h1').hide();
});
$('#showh1').click(function () {
$('div.showhide,h1').show();
});
$('#toggleh1').click(function () {
$('div.showhide,h1').toggle();
});
});
});
</script>
$("#demo").style is not a jQuery function
You should either use $("#demo").css("display","block") property or use show() or toggle() functions
Do
$(document).ready(function() {
$("input[type='button']").click(function() {
$("#demo").show();
});
});
or
document.getElementById("demo").style.display = "block";