I need to make a few buttons pop different menus, but I can't seem to make my JQuery call it just once. This is an almost exact copy of the sample code in w3, but for some reason whenever I click in any of the buttons both pop up one after the other.
HTML:
<p id="Chombas"> Chombas </p>
<p id="Buzos"> Buzos </p>
<script src="jquery-3.3.1.js">
</script>
<script src="calc2.js"></script>
JS:
$(document).ready("#Chombas").click(function() {
alert('CHOMBAS');
});
$(document).ready("#Buzos").click(function() {
alert('BUZOS');
});
Please help!
$(document).ready accepts a function as a parameter, not a selector to be chained. Wrap your script in only a single $(document).ready, and then attach listeners accordingly:
$(document).ready(() => {
$("#Chombas").click(function() {
alert('CHOMBAS');
});
$("#Buzos").click(function() {
alert('BUZOS');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p id="Chombas"> Chombas </p>
<p id="Buzos"> Buzos </p>
$(document).ready(function () {
$('#foo').click(function(e) {
alert('foo');
});
$('#bar').click(function(e) {
alert('bar');
});
})
Try replace with this.
$('#button-nav').on('click','p', function (evt) {
alert($(this).text());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="button-nav">
<p id="Chombas"> Chombas </p>
<p id="Buzos"> Buzos </p>
</div>
You can try this to avoid write duplicate code
Related
I am doing and show functionality I'm tried scenarios but it is not working, Please let me know what i did mistake.
My code :
function showButtons() {
$("#view").click(function(){
$("#allversion").show();
});
$("#view").click(function(){
$("#allversion").hide();
});
}
<div id="allversion" style="display:none">
SOME DISPLY CODE HERE
</div>
let me know the changes i need to made
<a onclick="showButtons()" id="view">View More</a>
Problem is that every time you call function showButtons that binds additional 2 click events every time (so clicking on link 2 times you will have 4 events in total). And your code shows and hides element at the same time.
You need to toggle it:
$(document).ready(function() {
$('#view').click(function() {
$('#allversion').slideToggle();
});
});
#allversion {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a id="view">View More</a>
<div id="allversion">VISIBLE!</div>
You don't need to call onclick="showButtons()" event for that. You can easily hide and show your section something like this:
$(document).ready(function(){
$("#view").click(function(){
$("#allversion").toggle();
});
});
I recommend you to use toggle method. The problem is that you have to use one single click event handler.
$("#view").click(function(e){
$("#allversion").toggle();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="allversion" >
SOME DISPLY CODE HERE
</div>
<a id="view">View More</a>
You can use toggle as suggested by others or you can try this
$("#view").click(function(){
if($("#allversion").hasClass('show'))
{
$("#allversion").removeClass('show').addClass('hide');
}
else
{
$("#allversion").removeClass('hide').addClass('show');
}
change to the following code, it should work.
<a id="view">View More</a>
var isClicked = false;
$( "#view" ).click(function() {
if (isClicked == true) {
$("#allversion").css("display", "none");
isClicked = false;
}
else {
$("#allversion").css("display", "inline");
isClicked = true;
}
});
Also you can use .toggle() to switch the visibility.
<a id="view">View More</a>
$( "#view" ).click(function() {
$("#allversion").toggle();
});
As per your question "Why isn't my code working?".
If your code is exactly as is here as on your site, it's not working because the script is initializing before the DOM is loaded.
Move your script to the bottom of the page or put it in to a
$(document).ready(function(){
//Code goes here
});
This works with me.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
function showButtons() {
$("#allversion").toggle();
}
</script>
</head>
<body>
<div id="allversion" >
SOME DISPLY CODE HERE
</div>
<a onclick="showButtons()" id="view">View More</a>
</body>
</html>
I have trouble getting value of particular item that I'd clicked
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(this).click(function(){
alert($(this).find("button").html());
});
});
</script>
</head>
<body>
<p>test 1</p>
<p>test 2</p>
<button>Yes</button>
<button>No</button>
</body>
</html>
I'd tried $(this).find("button").html(), but it will return the value of 1st button("Yes) even if I clicked the 2nd button("No")
Same for $(this).find("p").html(), will return value of 1st
How do I use $(this) to get the value of item I clicked?
Don't suggest me to insert class or id, I'm not suppose to touch the html.
Please assist, thanks.
this in your click handler is always the document (which you've bound the handler to), so that doesn't help anything. Instead, use something like
$(document).click(function(e){
if ($(e.target).is("button"))
console.log($(e.target).text());
} else {
console.log("not clicked (directly) on a button");
}
});
or rather just
$(document).on("click", "button", function(e){
console.log($(this).text());
});
It is because $(this).click event listener is added to document object and not any specific html element.
$(document).ready(function(){
$('button,p').on('click',function(){
alert($(this).html());
});
});
plunker: https://jsfiddle.net/wx38rz5L/1743/
If you are trying to get each button's html on click, use this.
$('button').click(function () {
alert($(this).html());
});
Bind the click event on both button and get the content of the html element with innerHTML.
$(document).ready(function() {
$('button').click(function(event) {
alert(event.target.innerHTML);
});
});
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>
<body>
<p>test 1</p>
<p>test 2</p>
<button>Yes</button>
<button>No</button>
</body>
</html>
You have to detect which $(this) is binded for ? Try something like this:
Setup an object
<button class="btn red btn-xs editbtn" type="button" value="${rs.id}" value="${rs.id}">
Function for this object
$(function(){
$('.editbtn').click(function(e){
common.showSpinner();
var idbbpdtd = $(this).val();
});
});
Try this.
$(document).ready(function() {
$(this).click(function(event) {
alert(event.target.innerHTML);
});
});
In jQuery event.target always refers to the element that triggered the event.
I have a html with python to dynamically load some buttons defined in a css:
<div id="Menu">
<center>
{{for nickname, my_id in zip(nicknames, my_ids):}}
<myButton class="c" name="{{=nickname}}", value={{=nickname}} id="{{=my_id}}">{{=nickname}}</myButton>
{{pass}}
</center>
</div>
then I have some javascript below:
<script type="text/javascript">
$(document).ready(function() {
$(".c").click(function() {
alert("haha");
}
}
</script>
Clicking on the buttons just doesn't work. I have viewed many threads here but I cannot find what the problem I get here. Browser is Chrome.
You need to close those functions:
$(document).ready(function() {
$(".c").click(function() {
alert("haha");
});
});
I have a list of <p class="results"> that jQuery is set to display a hidden <div> at the .hover() event:
<p class="results">item1</p>
<p class="results">item2</p>
<p class="results">item3</p>
...
<div id="hidden">My popup here</div>
...
<script>
$(".results").hover(function() {
$('#hidden').html(function() {
[...put html here...]
}).fadeIn(200);
}, function() {
$("#hidden").hide();
})
</script>
The problem is that (I assume) since I have a 200ms fade in if the user hovers from item to item quickly then leaves the <p> altogether, the second function to hide the <div> does not fire. I am pretty sure I need to add some code with the .stop() method somewhere in there, but not sure how to implement it. Any ideas?
You almost had it:
<p class="results">item1</p>
<p class="results">item2</p>
<p class="results">item3</p>
...
<div id="hidden">My popup here</div>
...
$(".results").hover(function() {
$('#hidden').html(function() {
[...put html here...]
}).fadeIn(200);
}, function() {
$("#hidden").stop().hide(); // <- important bit here
}
try:
<script>
$(".results").hover(function() {
$('#hidden').stop().html(function() {
[...put html here...]
}).fadeIn(200);
}, function() {
$("#hidden").stop().hide();
}
</script>
What about mouseenter, mouseleave?
http://jsfiddle.net/Yxv25/
$(".results").on('mouseenter',function() {
$('#hidden').fadeIn(200);
}).on('mouseout', function() {
$("#hidden").hide();
})
EDIT:
Or setting a timer, http://jsfiddle.net/Yxv25/1/
I was not quite sure which one you needed.
I want to hide google's +1 button after the user clicks on it using jQuery; this is the code I'm using but it seems it's not functioning properly:
JS:
$(function() {
$("#button").click(function()
{
$(".HIDE").hide();
});
return false;
});
HTML:
<div class="HIDE">
<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
<g:plusone size="small" class="plusone"></g:plusone>
</div>
Use the +1 tag callback parameter to fire the hide function. There's probably a better way to select the +1 button but this works for the purpose of a demo.
<g:plusone size="tall" callback="poHide"></g:plusone>
<script src="http://apis.google.com/js/plusone.js"></script>
<script>function poHide(){ $("#___plusone_0").fadeOut(); }</script>
Demo: jsfiddle.net/Gju6T
You may want to try the HTML5 equivalent syntax:
<div class="g-plusone" data-size="standard" data-count="true"></div>
All in all, the rendered HTML will be the thing to look at.
I think this is what you need, but put it at the end of your page just above </body>
$('g\\:plusone').live('click',function (){
$(this).remove();
});
ELSE
try this...
$('iframe').contents().find('#plusone').live('click',function (){
$(this).remove();
});
orrr
<script>
function mycall(str){
console.log(str);
//$(str).hide();//???
}
</script>
<g:plusone size="small" class="plusone" callback="mycall"></g:plusone>
The button is rendered into an iframe you don't have access to. The <g:plusone> tag is replaced by JS with an iframe and you cannot observe this button via jQuery, for example with live() or bind(). You have to use the API of the button which can be found here.
There you find the option "callback" you could use like this:
<script type="text/javascript" src="jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="https://apis.google.com/js/plusone.js">
{"parsetags": "explicit"}
</script>
<script type="text/javascript">
// Call the API method after the page loaded
$(document).ready(function() {
gapi.plusone.render("HIDE",
{"size": "standard", "count": "true", "callback" : "hideTheButton"});
});
// Method to remove the element
function hideTheButton() {
$("#HIDE").hide();
}
</script>
<div id="HIDE">
<g:plusone></g:plusone>
</div>