Develop Reference

How to get the current/this object on button click using bind event?

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");
});

jQuery .click() not working (debugging)

I am new to jQuery and am making a few .click() functions for my website, but no matter what I try, I can't get them to work.
jquery:
$(document).ready(function(){
$("#underlay-img-container-btns-add").click(function(){$("#underlay-img-container-form-file").click();});
$("#underlay-img-container-btns-submit").click(function(){document.forms['underlay-img-container-form'].submit();$("#underlay-img-container-general_loader").css("display","inline-block");});
$("#underlay-img-container-form-file").change(function(){readURLImg(this);});
$("#underlay-gif-container-btns-add").click(function(){$("#underlay-gif-container-form-file").click();});
$("#underlay-gif-container-btns-submit").click(function(){document.forms['underlay-gif-container-form'].submit();$("#underlay-gif-container-general_loader").css("display","inline-block");});
$("#underlay-gif-container-form-file").change(function(){readURLImg(this);});
});
readURLImg (displays an image preview before submission. This is part of a file uploading script.):
function readURLImg(input){if(input.files&&input.files[0]){var reader=new FileReader();reader.onload=function(e){$("#underlay-img-container-preview").attr("style","background-image:url("+e.target.result+");color:#fafafa");}
reader.readAsDataURL(input.files[0]);}}
I am sure my ids are correct. I have been trying to find the answer for hours with no success.

i have checked your website
then I've clicked on button upload you picture > opened the terminal and test
$("#underlay-img-container-btns-add").click(function(){alert('btn clicked')})
and the results appears
So, your problem is to call the events when the popups are ready
to Understand the concept
close the popup and try the same code it will retrieve empty array '[]'
<div class="btn" id="green" >
<div class="icon-image"></div>
<span>Upload your picture</span>
</div>
and add
$('.btn#green').click(function() {
$('.overlay').html($('.overlay').html().replace(/!non_select_tag!/g, 'img'));
$('.overlay').html($('.overlay').html().replace(/!non_select_txt!/g, 'Picture'));
// add you events
$("#underlay-img-container-btns-add").click(function(){alert('btn clicked')})
$('.overlay').show();
})
this will work

try
$("#underlay-img-container-btns-add").on( 'click', function () { ... });
may not work because content is dynamically created.

try
$("#underlay-img-container-btns-add").bind( 'click', function () { ... });

To bind events to dynamically generated elements in DOM, you may use
$('document').on( 'click', '#selector', function () {
...
});
This binds event to the DOM rather than to the element directly, which may not exist all the time.

try
$("body").delegate("#underlay-img-container-btns-add",'click',function(){
....
});

javascript click event subscription in appended html

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){
});

javascript event not registered

I get a strange behaviour. In a web page i import some script and i define some js function.
<script type="text/javascript">
$(function() {
}
</script>
When i click on a button i display a dialog (this block)
I took some info from the server... and insert it in the bookInfoBlock area
Finally i got
<div id="bookDialog" title="book info" style="display:none">
<button type="button" id="addBook1">+</button>
<div id="bookInfoBlock">
<button type="button" id="addBook2">+</button>
</div>
</div>
$('[id^=addBook]').click(function() {
alert("book test");
});
When i click on button with addBook1, i see the alert... but not when i click on addBook2.
It's like this last one don't know the event and javscript

It looks like you're loading addBook2 dynamically via ajax. In that case use event delegation using .on(). If the div bookInfoBlock is static & is present in DOM all the time, use this.
$('#bookInfoBlock').on('click', '[id^=addBook]'), function() {
alert("book test");
});
or if you're not sure about the static parent, use this
$(document.body).on('click', '[id^=addBook]'), function() {
alert("book test");
});
As of jQuery 1.7, the .live() method is deprecated and removed completely in version 1.9. For older versions use .live() instead of on()
$('[id^=addBook]').live('click', function() {
alert("book test");
});

You can use delegate instead of click .
live isn't more used, there is delegate :
$(document).delegate('[id^=addBook]','click', function() {
alert("book test");
});

append html with a function in it

I have a function onclick that add HTML :
jQuery(".test").click(function() {
jQuery(this).prevAll("input").val("5")
jQuery(".after").append("<div><input /><a class='.test'>click doesn't work !</a></div>")
});
So, when I click on my class .test, the function is triggered. And that works, but I have appended another class .test and when I click on it, the function isn't triggered. Why ?
Thanks.
Fiddle : http://jsfiddle.net/csL8G/3/

you can use jQuery.on() method if you are using jQuery 1.7+
//.on( events [, selector] [, data], handler(eventObject) )
$(document).on('click', '.test', function(){
//....
});
for previous versions u can use .live() or .bind() methods.

Use this to check for dynamically added .test elements:
jQuery("body").on('click', '.test', function() {
jQuery(this).prevAll("input").val("5");
jQuery(".after").append("<div><input /><a class='.test'>click doesn't work !</a></div>");
});
If you are using jQuery less than 1.8 then use live instead:
jQuery('.test').live('click', function() { ...
Basically the reason is because when the DOM loads then the initial click function just applies to elements already IN the document. But with the on() handler you sets a listener to check within the realm (body) which content has the test class and makes the click event work on that...

Hey Check your html you have written:
<a class=".test"></a>
it should be only class="test"
jQuery("body").on('click', '.test', function() {
jQuery(this).prevAll("input").val("5");
jQuery(".after").append("<div><input /><a class='test'>click doesn't work !</a></div>");
});