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);
});
});
Related
I have this href in my html:
<a id="m_MC_hl6_8" class="no_loaderbox button_link inline_block " href="somelink" target="_self">link</a>
When clicked on the link, a div is shown to show a waiting box.
For this specific link I don't want that so I wrote a piece of jquery to hide the div when clicked on the link.
$(document).ready(function() {
$(document).on('click', 'a.no_loaderbox', function(e) {
$('.loaderBox').hide();
});
});
But the line with hide is never hit.
I can't use the id because the link is dynamically created.
What am I missing here?
You can either return false or use e.preventDefault as Adel Elkhodary mentioned in the comments above. Then select the correct element and apply the method hide().
Here is the working code:
$(document).ready(function() {
$(document).on('click', 'a.no_loaderbox', function(e) {
$('.no_loaderbox').hide();
return false;
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a id="m_MC_hl6_8" class="no_loaderbox button_link inline_block " href="somelink" target="_self">link</a>
Return false or e.preventDefault were not the answers I was looking for.
I got the problem resolved by binding the event directly on the element $('a') instead of with $(document) and class.
I have following code:
$(document).bind('click', '.btn-yes .btn-no', function() {
$(this).toggleClass("btn-warning");
alert("test"); // <-- this works...
});
.btn-yes and .btn-no are two classes which are attached to buttons. When they are clicked, I want the btn-warning class to get attached to that button, but this is not working...
Can anyone let me know what I am doing wrong?
You need to have a comma , between your selector:
'.btn-yes, .btn-no'
and you should use event delegation only if your elements are dynamically generated after page load.
If such a case then the preferred method is .on() as per latest jQuery library. You can see this in action in the snippet below.
$(document).on('click', '.btn-yes, .btn-no', function() {
$(this).toggleClass('btn-warning');
});
.btn-warning{background:red; color:yellow;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class='btn-yes'>Yes</button><button class='btn-no'>No</button>
Problem:
When you don't use comma , in your selector such as in this case you are actually trying to bind a click event on the child .btn-no which has the parent .btn-yes.
Try this:
$(document).bind('click','.btn-yes .btn-no',function(e){
$(e.target).toggleClass("btn-warning");
});
'.btn-yes .btn-no' denotes to the btn-no inside btn-yes not separate elements. So, separate your elements with a comma and use click event for that.
I also recommend you to use on instead of bind method:
$(document).on('click', '.btn-yes, .btn-no', function(){
$(this).toggleClass("btn-warning");
});
If you have jquery version 1.7+ use on method
$(document).on('click', '.btn-yes,.btn-no', function() {
$(this).toggleClass("btn-warning");
});
I have this javascript code that appends html code into a tag:
var html ='<ul class="nav well-tabs well-tabs-inverse mb10">';
html +='<li class="active"><a id="#tab_'+this.my.user+'" data-toggle="tab">'+this.my.user+'</a></li>';
var users = this.my.community_users;
for (i=0;i<users.length;i++) {
if (users[i].user != this.my.user)
html +='<li><a id="#tab_'+users[i].user+'" data-toggle="tab">'+users[i].user+'</a></li>';
};
html +='</ul>';
$(html).appendTo("#Dashboard");
I want to capture the any tab click event and alert the id of the tab being activated by the click. If I simply add this code after the previous javascript code
$('a[data-toggle=tab]').click(function(){
alert(this.id);
});
this is not working. On the other hand if I settimeout after the second it works:
setTimeout(function(){
$('a[data-toggle=tab]').click(function(){
alert(this.id);
});
}, 1000);
I don't like much this to settimeout so what would be a cleaner solution to this? I guess the event suscription is being done before the html code is appended?
For dynamically created elements in jQuery you should use a static parent to select the dynamic element, in your case an example can be:
$('#Dashboard').on('click', 'a[data-toggle=tab]', function(e){
//your code here
});
OR even the document itself
$(document).on('click', 'a[data-toggle=tab]', function(e){
//your code here
});
you can use delegate() or on() for this purpose
see delegate and on
Note: As of jQuery 1.7, .delegate() has been superseded by the .on() method
In your case you are not giving selection with respect to parent
$("parent_selection").on('click', 'actual_element' ,function(){});
your case
$(document).on('click', 'a[data-toggle=tab]', function(e){
});
I need to react to click events of dynamically created elements. Is there an elegant way to combine the functions, that I only have to listen once to a click in the body? Some of the elements have several classes.
HTML
<div class="dropDown blueBG"></div>
JS
$("body").on('click', '.dropDown', function(e){
.......
});
$("body").on('click', '.aButton', function(e){
.......
});
$("body").on('click', '.aForm', function(e){
.......
});
Combine them in the selector using a comma to separate them:
$("body").on('click', '.dropDown, .aButton, .aForm', function(e){
});
If you want to find out what was clicked you can use $(this).is('.dropDown') or $(this).hasClass('.dropDown').
Try to use the multiple selector,
same function for all the elements:
$("body").on('click', '.dropDown,.aButton,.aForm', function(e){
});
different functionality for different elements:
$("body").on('click', '.dropDown,.aButton,.aForm', function(e){
if ($(this).is('.dropDown')) { }
else if ($(this).is('.aButton')) { }
else { }
});
Create a new class that is common to the elements that you would like to handle the click event with:
HTML:
<div class="dropDown blueBG clickable"></div>
JS:
$("body").on('click', '.clickable', function(e) {
.......
});
Attaching an event on the dynamically created elements(tags are being created through Java script) responses abruptly.
So for a definite result access the parent element of the dynamically created tags and invoke an on("Event") function.
Belowmentioned is the sample code:-----
$(".parent").on("click",".newele1,newele2",function()
{
-----content-------------
});
For a clear picture please refer to this js fiddle example.
//jsfiddle.net/5SyS3/6/
So I'm going to explain this with an example.
I have a "like" button (class: .like) for my feed or stream. When the user clicks it ( using $(".like") ), it ajaxes it's way to refreshless insert the like into the database (using jQuery).
When it's inserted, I change the text to "Unlike" and the class to ".unlike".
However, when a user reclicks it, it just goes through the same function again, instead of going to the $(".unline").click function. Do I have to "update" the script or something?
For example:
$(".like").click(function(){
alert("Like!");
$(this).attr("class", "unlike");
});
$(".unlike").click(function(){
alert("Unlike!");
$(this).attr("class", "like");
});
The problem is that it won't to the unlike function, it will just repeat the like function even though the attribute is changed.
That is because the "unlike" attr. hasn't been added to the dom when the script loaded. Try this:
<body>
<div class="like_it_or_not">
HELLO!
</div>
</body>
And the JS
$("body").on('click','.like_it_or_not', function(){
$(this).toggleClass('like', 'unlike');
if ($(this).hasClass('like')) {
alert('like');
} else if ($(this).hasClass('unlike')) {
alert('unlike');
}
});
If you don’t want to delegate your click event (which is over-engineering IMO), do a check in the handler:
$(".like").click(function(){
alert( $(this).hasClass('unlike') ? 'unlike' : 'like' );
$(this).toggleClass("unlike like");
});
http://jsfiddle.net/NScyM/
It should check for the 'unlike' class each time you click and toggle classes as expected.
The event binding occurs when you assign run the above code. You have to rebind the event every time, or, better yet, use event delegation:
$(document)on("click",".like",function(){
alert("Like!");
$(this).addClass("unlike");
$(this).removeClass("like");
});
$(document)on("click",".unlike",function(){
alert("Unike!");
$(this).addClass("like");
$(this).removeClass("unlike");
});
I think you will have to use live() or on() to make this work:
$(".like").live("click", function() {
$(this).removeClass("like").addClass("unlike");
});
$(".unlike").live("click", function() {
$(this).removeClass("unlike").addClass("like");
});
Try this one
$(".like").click(function(){
alert("Like!");
$(this).removeClass("like");
$(this).attr("class", "unlike");
});
$(".unlike").click(function(){
alert("Unlike!");
$(this).removeClass("unlike");
$(this).attr("class", "like");
});
To keep my code clean on stuff like this, I assign a class that never changes and tie the click event to that. The styling classes simply act as CSS changes. For instance:
<button class="vote like">button text</button>
$('.vote').click(function () {
var alertText = ($(this).hasClass('like')) ? 'Like!' : 'Unlike!';
alert(alertText);
$(this).toggleClass('like').toggleClass('unlike');
});
Try this
$(document).on('click', '.like', function(){
alert("Like!");
$(this).html('Unlike').removeClass("like").addClass("unlike");
});
$(document).on('click', '.unlike', function(){
alert("Unlike!");
$(this).html('Like').removeClass("unlike").addClass("like");
});
DEMO.
The unlike click event handler has not been associated with the new item. If you're going to be changing the class dynamically like that you're going to want to look at the (jQuery on handler)[http://api.jquery.com/on/]
$(document).on('click',".like", function(){
alert("Like!");
$(this).addClass("unlike").removeClass('like');
});
$(document).on('click',".unlike",function(){
alert("Unlike!");
$(this).addClass("like").removeClass('unlike');
});