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){
});
Related
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'm trying to trigger a already written click event for an anchor tag using JavaScript but it is not working. can any one please help me to do this
I have a anchor tag
<a id="memberid">Data Member</a>
<script>
$("#memberid").click(function() {
changebreadcrumb("Data Management");
});
</script>
i want to trigger above click event on load
i tried
$("#memberid").click();
and
$("#memberid").trigger("click");
but did not work.
Place this at the end of your HTML before the closing body tag
<script>
$(document).ready(function(){
$('#memberid').trigger('click');
});
</script>
DEMO
Use jquery and check whether your dom is ready. It works fine.
See the properties in the fiddle on its left side panel
$("#memberid").click(function() {
alert('clicked');
});
$("#memberid").trigger("click");
EDIT:
FINAL DEMO
If you want to triger click on pageload, use window.onload in javascript or jquery load method as i mentioned.
$(window).load(function()
{
$("#memberid").trigger("click");
});
If your click is not working then in that case....try on() function to trigger event
$(document).ready(function(){
$("#anchor_id").on( "click", function() {
//your work
});
});
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);
});
});
I understand that you need to use ".on" to use code that you loaded with jquery after the page has loaded. (At least I think it works that way)
So I tried that but it somehow just doesn't do a thing at all. No errors in the console either.
$("#forgot_password").click(function(){
var forgot_password = '<div id="toLogin" style="cursor:pointer;">Prijava</div>'
$("#loginPopupForm").html(forgot_password);
});
$("#toLogin").on("click", function(){
alert("Hello");
});
So when I click on #forgot_password it does execute the first click function. But when I click on #toLogin it doesn't do anything and I think its because its loaded with jquery when I click on #forgot_password
Try this
$("#loginPopupForm").on("click", "#toLogin", function(){
alert("Hello");
});
You need to bind to an element that is present when the page loads, like body for example. Just change your code to what is shown below
$("body").on("click", "#forgot_password", function(){
var forgot_password = '<div id="toLogin" style="cursor:pointer;">Prijava</div>'
$("#loginPopupForm").html(forgot_password);
});
$("body").on("click", "#toLogin", function(){
alert("Hello");
});
You are setting the on to the wrong thing. You want it to be:
$(document).on('click', '#toLogin', function() {alert('hello') });
The id isn't there until you do the other click event, so jQuery is not finding any element to set the click event on. You need to have an element that has been rendered in the DOM to set the event on.
You are totally right about the problem : on() targets only elements that are already existing as it runs.
What you need in jQuery is called Delegated event and is well explained on the Jquery doc page.
The difference in the code is thin, but it's how you're supposed to do.
You have to specify the parent element
$("#toLogin").on("click","#loginPopupForm", function(){
alert("Hello");
});
in the 2nd argument of the on
The code is:
Done
I want this part becomes unclickable once if it is clicked, how to achieve this using Jquery or Javascript?
Use the .one() method which does exactly that ..
$(document).ready(function(){
$('#anch1').one('click', function() {
Record(/* your parameter */);
});
});
Provide the anchor tag an id and remove the onclick handler from the HTML markup.
<a id="anch1" href="#" style="color:black">Done</a>
$(function(){
$("#anch1").bind("click",function(){
// do your action here
$(this).unbind("click"); //unbinds the click event
});
});