We Keep Coding

Jquery fadeOut with this selector

I am trying to make an element disappear when clicked, the elements are dynamic.
$("#toast-container").on("click", "div.toast", function() {
$(this).fadeOut("fast", function() {
$(this).remove();
});
});
I have tried the code with just $(this).remove() and it works but using fadeOut it doesn't. I have no idea why and it looks absolutely fine to me

I have a easy solution.
HTML
<div id="toast-container">
<div class="toast">
Click Me
</div>
</div>
jQuery
$("div.toast").click(function(){
$(this).parent("#toast-container").fadeOut('slow');
// run your another event.
})
Check my live demo on jsfiddle

well when adding elements dynamically to DOM tree i think your events may register at creation of the page but when you add an element dynamically you should use another jquery function which is called delegate
see the documentation

What is this?
"div.toast"
If your div class is "toast", it should just be ".toast" (it will work with the div.toad, but syntactically, this is not really correct.
That said, your function works fine when I drop it in a fiddle. Are you certain that you are not getting any console errors perhaps related to another feature/function? Check your console.

jQuery not inserting attribute into the link

I have a link to slide down a div as follows.But initially this link has no onclick handler, which I am inserting using the jQuery code.
Show Div
Now the following is the jquery code
//id comes from a loop which runs from 1 to 15
$("#Link_"+id).attr('onclick','$(\'#Div_'+id+'\').slideToggle(\'slow\');');
$("#Link_"+id).attr('style','color:white;');
$("#Link_"+id).attr('value','0');
The last two lines are inserting attributes but the first line is not working and also I am not getting any error.I am using jQuery 1.4
EDIT
Now the surprise,I just by luck tried it,
the first line is working in jquery 1.9.Why?

You can't add a click handler like that, try this instead:
$("#Link_"+id).live('click', function(){
$('#Div_'+id+'').slideToggle('slow');
});

Try binding it this way:
$("#Link_"+id).on("click", function () {
$('#Div_'+id+).slideToggle('slow');
});
as you are using jquery 1.4. You would be needing live instead of on
$("#Link_"+id).live( "click", function() {
$('#Div_'+id+).slideToggle('slow');
});

I would recommend using .click() instead.
$("#Link_"+id).click(function(){
$('#Div_'+id).slideToggle('slow');
return false;
});
To answer the edit: jQuery 1.9 checks if you are trying to set an event handler and adds the handler instead of setting an attribute. jQuery 1.4 doesn't have such a check. (I looked at the source)

JQuery / Live is deprecated, well okay… But is not replaced

On is not working as a replacement for live; as the new ON is NOT working for future elements. No problems in my implementations; I'm used to use live and I definitely know when something works or not with jquery.
haml part :
.field
%label Select a file
= file_field_tag 'post[image]', :class => :dashed
%span.adder + add another file
coffe part :
$("span.adder").on "click", (e) ->
new_field = $(this).closest(".field").clone()
$(new_field).insertAfter( $(this).closest(".field") )
Why the new span.adder added does not have the jquery behaviour attached to their class ?
Something like this shoudl work in that case.
Why the JQuery guys did remove it ?
I don't get it.
UPDATE
$("span.adder").on("click", function(){ });
Will not work as live.
It has to be
$(document).on("click", "span.adder", function(){ });
(thanks for everyone's answers.)

To work with future elements you must use on document like this
$(document).on('click', 'span.adder', function(){
//Code here
});

Before .on() ever came around, .live() was already considered an inefficient way to handle event binding, Because of that for future use you have to use .on()
e.g:-
$(document).on('click', '#yourElement', function() {
// your functions here
});
There is a better explanation here

It is a replacement. The direct translation would be:
$(document).on('click', '.my-selector', function() {});

They deprecated and remove it because they had better implementation. You see the documentation of .on()
$(ancestor).on(event, element, function);
You should use that as ancestor which is near to that element. There are some performance issues.
Upgrade jQuery version also.

On works asdelegate` used to do, not exactly as .live; you have to use it on a parent and then specify the event and the children that triggers it; something like.
$(window).on("click", ".button", function(){
alert("You clicked the button... and I hate alerts");
});

How to add touch events to a class?.. prefereably through jquery

How can you do something like the following?
$('.myDivs').ontouchstart(function(){
alert('touch');
})
the only way I appear to be able to implement touch events is using javascript.. like so
document.getElementById('singleDiv').addEventListener("touchstart",touchHandler, false);
However I would like to implement this to a class, rather than an id... therefore is there a way to do it using jquery like the above example?....
I have found the answer:
$('.myDivs').bind('touchstart', function (event) { alert('touch');});
Kind regards J

As of jQuery 1.4.2, the following works fine for me:
$('.classname').live('touchstart', function(e) {
// Do whatever you want here...
});
Or for the latest versions of jQuery:
$('.classname').on('touchstart', function(e) {
// Do whatever you want here...
});

just select the class instead of the id:
document.getElementsByClassName('myClass').addEventListener(...);
please not that this selector will not work in IE. For IE you could use jQuery:
$('.myClass').on("click",function(){});

Avoid window jump to top when clicking #-links

I've got a page with some questions and answers, the answers are collapsed by default. When they click the question I expand the hidden answer-div. The problem is that when I click these questions, the window jump to the top of the screen. This is not a huge problem, but I find it annoying, because I have to scroll down to the question again.
The links simply looks like this:
Myquestion
And I've used jQuery and .click as event-listener.
Are there any simple ways to avoid this, or do I have to use .scroll and finding the coordinates of the question? I'd rather avoid this.
EDIT: I know that I can use anchors to do this, but I'd like to avoid any jumping of the screen at all.

You need to add preventDefault() to your click handler. This will stop the browser executing it's own link handler, and will only run the code you specify.
Example:
$("#myID").click(function(e) {
e.preventDefault();
// Do your stuff
});

Don't use A tags for tasks that are not navigation-related. It is not semantic markup, and doesn't degrade gracefully. Use buttons instead.

You can do it very simple:
Just add ! in the end of your href:
Myquestion
The alternative jQuery ways are:
$("#myID").click(function(e) {
e.preventDefault(); // one way
return false; // second way prevent default click action from happening
});

$("#myID").click(function(e) {
if(e.preventDefault)
e.preventDefault();
else
e.stop();
});
e.preventDefault()alone did not work in older versions of IE.

Actually, the easiest way to do this is to remove the href attribute from your anchor tag. As of HTML5, anchor tags don't need to include href attributes to be semantic.
So
<a id="myID">Myquestion</a>
instead of
Myquestion
This works in IE8+, Chrome, and Firefox. Note that :link css styles won't apply to anchor tags that don't include href attributes.
If you need the href attribute and/or IE7 compatibility, then
$("#myID").click(function(e) {
if(e.preventDefault)
e.preventDefault();
else
e.stop();
});
is probably the best way to go.

$('a').click( function() {
if ($(this).attr("href") == window.location.hash) {
event.preventDefault()
}
});

You are looking for event.preventDefault (see jQuery API).
$(...).click(function(e) {
e.preventDefault();
// your code
});

Example with nice scrolling to answer content:
$("#question_title").click(function(){
var $answer=$("#answer");
$answer.slideDown();
$.scrollTo( $answer, 800 );
return false;
});
I'm used jQuery scrollTo plugin.

Inside your function of:
And I've used jQuery and .click as event-listener.
Will look something like:
$("#myID").click(function(){});
Change this to (don't forget the param e inside function(e):
$("#myID").click(function(e){
e.preventDefault();
});

$('body').on('click', '[href^=#]', function (e) {
e.preventDefault()
});
if the selector ex.."body" is there during the initial render then use the any selector .. id ... to target the general to have jQuery (as of 1.8.2) iterate over. the "On handler invoke a method called "bind" which is used for newly added content to the DOM",. Using the "[href^=#] will select any href that are in the section tag but you can replace section with anything or nothing and it applies a cancellation to the click event. This technique is great for dynamically created content to the DOM

If you add a "\" to the "#" it will prevent from going to the top.
Myquestion

HTML:
<a id="like-post" href="#\">like</a>
JavaScript:
$('body').delegate('#like-post','click',function(e) {
e.preventDefault();
.....
});