I wanna do openable menu on jquery. I use click methods and It's work but I can't close it. How can I close? Thank you :)
$("div#kkayit").on("click", function(){
$(this).css("background-color", "pink");
});
$("div#kkayit").on("click", function(){
$("div#kkayit").off("click");
});
You can use the function toggle in jquery:
http://api.jquery.com/toggle/
$(document).ready(function(){
$("button").click(function(){
$("p").toggle();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p> HERE Will toggle</p>
<button>Toggle between hide() and show()</button>
You have registered the same event for same selector two times. So I would recommend to use only below code for mentioned selector's click event.
$("div#kkayit").one("click", function(){
$(this).css("background-color", "pink");
});
http://api.jquery.com/one/
Please try below:
$("div#kkayit").on("click", function(event){
$(this).css("background-color", "pink");
event.preventdefault();
});
Please let me know if I answered your question or not.
Thanks.
Vinay
Related
This is my code :
<html>
<body>
<button class="myclass" data-card-id="1">Save</button>
</body>
</html>
My question is how whould look like a function that when user click on any of "myclass" buttons submit a variable with data-card-id of the specific card in a php file.
Thank you ! :)
this is using Jquery:
$(".myclass").click(function(){
$(this).attr( "data-card-id" );
});
JSFIDDLE - http://jsfiddle.net/q5j8z/11/
see browser console for data display
// change the selector "ul li a" to your button
$('ul li a').click(function (e) {
e.preventDefault();
var value = $(this).data('value');
$('.button').data('value', value);
console.log($('.button').data('value'));
});
$('.button').click(function (e) {
e.preventDefault();
console.log($(this).data('value'));
});
This can be accomplished through an additional selection feature. I believe "data-card-id" is an attribute of your html tag, so you have two choices.
Bind the click to the element using the selector or delegate it to the body of the document, I think you'll see how either way works here.
Option 1. The advantage here is that when click events bubble up to the body this will check and execut appropriately, even if other buttons are added to the page after this code is executed. This is jquery's click delegation feature
$('body').on('click', 'button[data-card-id="1"]', function(){
//perform your action
});
Option 2. This binds the click event to the object itself. This can be more straight forward and has its advantage in simplicity.
$('button[data-card-id="1"]').click(function(){
// perform some action
});
And of course you have a plethora of other approoaches......
or
$('button').each(function(){
if($(this).attr("data-card-id") == '1'){
$(this).click(function(){
//some action
});
}
});
There are other approaches, too. Let me know if none of these seem to work.
JS FIDDLE DEMO
The most simpler would be to use this code -- >
just change this card-id to this cardid
HTML
<button class="myclass" data-cardid="1">Save</button>
<button class="myclass" data-cardid="2">Save</button>
JS
$(document).ready(function(){
$(".myclass").on('click',function(){
var cid = $(this).data("cardid");
alert(cid);
});
});
<div class="imgtumb"><img src="..."></div>
sometext
<script>
$(document).ready(function() {
$('div.imgtumb img').click(function() {
$('a.imgtarget').click();
});
});
</script>
The link not work (dont open a big image). What i do wrong?
----Edited----
Thank you guys, but .trigger() is not working too. I resolved this problem something like this:
$(document).ready(function() {
$('div.imgtumb img').click(function() {
window.location.href = $('a.imgtarget').attr("href");
});
});
----Edited 2---
Question which explained why .click() is not working with a tag
try this:
<script>
$(document).ready(function() {
$('div.imgtumb img').click(function() {
$('a.imgtarget').trigger('click');
});
});
</script>
the event trigger is the event to make another event to an element
http://api.jquery.com/trigger/
use trigger()
. A call to .trigger() executes the handlers in the same order they would be if the event were triggered naturally by the user:
try this
$('a.imgtarget').trigger('click');
instead of
$('a.imgtarget').click();
try to use this instead of .click()
window.open(
'toBigImg',
'_blank'
);
I have the following UL:
<ul class="xbreadcrumbs" style="position:absolute; bottom:0px">
<li>A Crumb</li>
</ul>
This is being dynamically created by my javascript. How can I override the click for each LI that is inside of a UL called xbreadcrumbs in jQuery and have it do something instead of go to a new hyperlink?
Also, how can I get the behavior to be different for each li?
Updated:
$.each('.xbreadcrumbs li', function(){
$(this).live('click',function(e){
e.stopPropagation();
console.log('clicked for each li');
});
});
Live is part of the answer, the other part of the answer is that you need to use the event's target property to know which element was actually clicked.
$('.xbreadcrumbs li').live('click', function(e){
e.preventDefault();
console.log('Clicked on element', e.target);
});
Once you add the ul dynamically to the DOM you could subscribe to the .click() event of the inner lis:
$('.xbreadcrumbs li').click(function() {
// do something when the li is clicked
});
you'll have to use the .live() function so that dynamically created elements get the event attached...
$("ul.xbreadcrumbs li").live("click", function() {
//do something
}
Use a live event:
$('.xbreadcrumbs li').live('click', function(){
//override here
});
Since the </ul> is being added dynamically it is best to use $.live() or $.delegate() like this:
$('.xbreadcrumbs li').live('click', function(e){
e.stopPropagation();
console.log('Clicked');
});
Hope this helps!
<div id="newsSubmit"><b>Add random snippet</b></div>
<script>
$("#newsSubmit").click(function(){
$("body").append("<div class='lol'>Ok, DELETE this snippet (click here)</div>");
});
$(".lol").click(function(){
$(this).fadeOut();
});
</script>
http://jsfiddle.net/apzdt/6/
How can I fix it? It's not working
http://jsfiddle.net/apzdt/7/
change mootools to jquery and .click() to .live('click')
I want to disable this button on document ready but I'm new to it so please help:
Here is my code:
$(document).ready function {
setTimeout("check_user()", 250);
}
please help
If button's id is button1, this should work.
$('#button1').attr('disabled', 'disabled');
The correct way to disable a button in current versions of jQuery is:
$('#btnid').prop('disabled', true);
.attr() is the old way. See the jQuery 1.6.1 release notes for more information.
$(document).ready(function(){
$('#btnId').attr('disabled', 'disabled');
});
$(function(){
$('#button').attr('disabled', 'disabled');
});
$(document).ready(function(){
$('#buttonclass').attr('disabled', true);
});