Develop Reference

How to find all events inside a container and delegate them

Suppose I have a markup like this
<div class="container">
<div class="abc" onclick="alert(this.innerHTML)">ABC</div>
<div class="abc1">ABC</div>
<div class="abc2">abc2</div>
<div class="xys3">xys3</div>
<div class="asd23">asd223</div>
</div>
And there are events which are bind to the children of a container like this
$( ".abc1" ).bind( "click", function(){
alert( $( this ).html() );
} );
$( ".abc2" ).bind( "click", function(){
alert( $( this ).html() );
} );
$( ".xys3" ).bind( "click", function(){
alert( $( this ).html() );
} );
$( ".asd23" ).bind( "click", function(){
alert( $( this ).html() );
} );
Now, I get the html out of container and set it back again :
var html = $( ".container" ).html();
// a set missing here to convert 'bind' events to 'on' events
$( ".container" ).html( html );
Events won't work now since they were not delegated to start with. Also, container may be having more elements (they are dynamic).
Is it possible to find all events inside a container and delegate them?
Here is a Fiddle

As of jQuery 1.7, the .on() method is the preferred method for attaching event handlers to a document. For earlier versions, the .bind() method is used for attaching an event handler directly to elements.
So just use event delegation on() and it will solve the problem :
$( "body" ).on( "click", ".abc2", function(){
alert( $( this ).html() );
});
You could add a general class to all divs then attach click event to it :
HTML :
<div class="container">
<div class="my-class abc" onclick="alert(this.innerHTML)">ABC</div>
<div class="my-class abc1">ABC</div>
<div class="my-class abc2">abc2</div>
<div class="my-class xys3">xys3</div>
<div class="my-class asd23">asd223</div>
</div>
JS :
$( "body" ).on( "click", ".my-class", function(){
alert( $( this ).html() );
});
Hope this helps.
$( "body" ).on( "click", ".my-class", function(){
alert( $( this ).html() );
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="my-class abc" onclick="alert(this.innerHTML)">ABC</div>
<div class="my-class abc1">ABC</div>
<div class="my-class abc2">abc2</div>
<div class="my-class xys3">xys3</div>
<div class="my-class asd23">asd223</div>
</div>

The delegation methods are like this:
$(document).on( "click", ".abc1", function(){
alert( $( this ).html() );
});
You can change $(document) with an element in the DOM that hasn't change and it's parent of the children you need to delegate. With document will works in every cases, but the performance can be less.

jquery draggable on few divs

Picture:
<div id="grid-wrapper">
<div id="grid"></div>
<div id="grid"></div>
<div id="grid"></div>
<div id="grid"></div>
</div>
I want to change class on two divs when I drop my span, and remove draggable.
I have this:
$( ".dragandrop" ).draggable({ snap: "#grid" });
$("#grid").droppable({
drop: function( event, ui ) {
$( this )
.addClass( "droped" )
}
});
This code add me .droppable only on first div, and doesn't add class "droped", I can't do removing .draggable. Can you help me?

First off, be careful using the same id for multiple elements. It can cause really weird issues (see this post).
Second, make sure you add the draganddrop class to the appropriate elements that you want to, well, drag and drop.
And you want to removed the draggable on an element once you dropped it? I think what you want looks something like this:
$( ".dragandrop" ).draggable({
snap: ".dragandrop" ,
stop: function(event, ui){
$( this ).addClass( "droped" );
$( this ).draggable( 'disable' );
}
});
$(".dragandrop").droppable({});
div{
padding: 20px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<div id="grid-wrapper">
<div id="grid1" style="background:orange;" class="dragandrop">a</div>
<div id="grid2" style="background:red;" class="dragandrop">b</div>
<div id="grid3" style="background:green;" class="dragandrop">c</div>
<div id="grid4" style="background:yellow;" class="dragandrop">d</div>
</div>
You may also want to add in some logic to keep the active div on top.

How can I have only one div shown at a time?

I have this code but I'm not sure how to make it so that each time one button is clicked, it closes the other div that is already open. New to jquery!
HTML:
<p class="profile-name">Name</p><br>
<p class="profile-title">Documentation Officer</p><br>
<button id="button-g" class="bio-button">Bio</button><br>
<a class="profile-email" href="mailto:email#test.com">email#test.com</a>
<div class="toggler">
<div id="effect-g" class="profile-bio">
<p>Bio information. Bio Information</p>
</div>
</div>
JQUERY:
<script>
$(function() {
$( "#button-a" ).click(function() {
$( "#effect-a" ).slideToggle( "visible");
});
$( "#button-b" ).click(function() {
$( "#effect-b" ).slideToggle( "visible");
});
$( "#button-c" ).click(function() {
$( "#effect-c" ).slideToggle( "visible");
$("#button-b").hide();
});
$( "#button-d" ).click(function() {
$( "#effect-d" ).slideToggle( "visible");
});
$( "#button-e" ).click(function() {
$( "#effect-e" ).slideToggle( "visible");
});
$( "#button-f" ).click(function() {
$( "#effect-f" ).slideToggle( "visible");
});
$( "#button-g" ).click(function() {
$( "#effect-g" ).slideToggle( "visible");
});
});
</script>

It's rarely wise to target a zillion elements by ID (or any other unique attribute) in a uniform, repetitive structure. Give all your buttons and all your collapsible siblings the same classes, respectively, then do this (or something similar--I can't be more specific without seeing your HTML):
$('.my-button-class').click(function() {
$(this).next('.my-collapsible-div-class').slideDown()
.siblings('.my-collapsible-div-class').slideUp();
});
This assumes markup like this:
<button class="my-button-class">Button</button>
<div class="my-collapsible-div-class"> ... </div>
<button class="my-button-class">Button</button>
<div class="my-collapsible-div-class"> ... </div>
<button class="my-button-class">Button</button>
<div class="my-collapsible-div-class"> ... </div>
Update based on your HTML:
$('.bio-button').click(function () {
$(this).nextAll('.toggler:first').slideToggle()
.siblings('.toggler').slideUp();
});
Demo
http://api.jquery.com/nextall
http://api.jquery.com/first-selector
Off-topic suggestion: Use CSS margin or padding rather than line breaks to format your content. Extra markup elements for spacing is ugly and inefficient.

Give the div's a common class, and a custom data attribute with the letter of the next div to open, then combine this into a single function. Sample div:
<div id="effect-a" class="effect"></div>
Sample button
<button id="button-a" class="button" data-letter="a">Click me</button>
Single function
$(".button").click(function() {
//Slide up any open divs
$(".effect").slideUp();
var divLetter = $(this).data("letter") //a
//Concatenate selector
$("#effect-" + divLetter).slideDown();
});

Jquery Drag and Drop on Ajax loaded Div

I want to be able to drag an element on the page into a droppable element inside an ajax loaded div. I can get the code to work when I place the droppable element in the regular page but not when i have the same element on the ajax loaded div. Im pretty sure its because of the way I'm calling scripts and how they load on the dom, but I can't find the solution. Note: I have tried calling the code which loads the ajax content before calling jquery ui but that didn't work either.
Here is how I'm calling everything, I removed the extraneous code for brevity.
main page
<head>
<scripts -- jquery, jquery ui>
<script>
$(document).ready(function(){
$( "#site-preview" ).load( "/site/preview" );
});
</script>
</head>
<body>
<div class="draggable><img src=//etc/> </div>
//if I put this div here, I can drop to it, so i know the drop code works.
// <div class="droppable col-md-2" style="height:100px;border:1px solid gray"><p> </p></div>
<div id="site-preview"></div>
<script>
$(function() {
$( ".draggable" ).draggable({
helper:'clone',
appendTo: 'body',
scroll: false
});
$( ".droppable" ).droppable({
drop: function( event, ui ) {
$( this ).addClass( "ui-state-highlight" ).find( "p" ).html( "Dropped!" );
}
});
});
</script>
</body>
ajax loaded code
<div class="droppable col-md-2" style="height:100px;border:1px solid gray">
<p> </p>
</div>

This appends because you try to call the droppable on a non-existing element at that moment. To solve this, you could use the callback function that can be attached to the load function and run the rest after that.
$(document).ready(function(){
$("#site-preview").load("/site/preview", function() {
// Page loaded and injected
// We launch the rest of the code
$( ".draggable" ).draggable({
helper:'clone',
appendTo: 'body',
scroll: false
});
$( ".droppable" ).droppable({
drop: function( event, ui ) {
$( this ).addClass( "ui-state-highlight" ).find( "p" ).html( "Dropped!" );
}
});
});
});
You can find other information about the load function here. The callback can take arguments and can be used, for example to check if it's a 404 or not.

Well I was able to get it to work by adding the draggable/droppable code to the ajax loaded div itself.
So the above would be amended like so
ajax loaded code
<div class="droppable col-md-2" style="height:100px;border:1px solid gray">
<p> </p>
</div>
<script>
$(function() {
$( ".draggable" ).draggable({
helper:'clone',
appendTo: 'body',
scroll: false //stops scrolling container when moved outside boundaries
});
$( ".droppable" ).droppable({
drop: function( event, ui ) {
$( this ).addClass( "ui-state-highlight" ).find( "p" ).html( "Dropped!" );
}
});
});
</script>
And those script lines would be taken out of the main page

Ajax is Asynchronous. So if you call some ajax and then call some other command, the ajax will usually finish afterwards.
This is where callbacks are useful. Try adding a callback to the ajax load call as shown here: http://api.jquery.com/load/
Something like:
$( "#site-preview" ).load( "/site/preview", function(){
$( ".droppable" ).droppable({
drop: function( event, ui ) {
$( this ).addClass( "ui-state-highlight" ).find( "p" ).html( "Dropped!" );
}
});
});
Side note: you should probably start using scripts instead of <script> tags.

jQuery-UI draggable/droppable Jumping

I'm not new to code here, but this is my first question on SO, so if my etiquette is off excuse me just this once. I've looked around for support on this, and it doesn't seem many people are running into this problem.
I'm playing with jQuery-UI for the dragging and dropping elements, and for the most part it's working fine. However when I drag something from a 'tabbed' div into a droppable area it jumps a couple hundred pixels below it. It's especially odd because I've got it set to revert it's position on an invalid drop, and that's working, but it ignores this rule on the first drop that makes it jump. I'm not sure if this is something in the CSS position style, or if I'm not setting my UI attributes correctly.
http://www.putoutsystems.com/jtest/
Hit the consumables tab > drag the item into the bin. You should see the behavior I'm describing. I'm using jQuery 1.10.2 and jQuery UI 1.10.4
This is all the code for the app:
<link href="css/pepper-grinder/jquery-ui-1.10.4.custom.css" rel="stylesheet">
<style>
#potion { width: 24px; height: 24px; position:relative;}
#tabs { width: 500px; height: 100px;}
#droppable { width: 500px; height: 100px;}
.inventoryTab { height: 40px; }
</style>
<!-- libraries -->
<script src="js/jquery-1.10.2.js"></script>
<script src="js/jquery-ui-1.10.4.custom.js"></script>
<!--functions -->
<script>
//functions
$(function() {
//Dragable Elements
$( ".draggable" ).draggable({ revert: "invalid"});
//Hover Text
$( document ).tooltip();
//droppable elements
$( "#droppable" ).droppable({
drop: function( event, ui ) {
$( this )
.addClass( "ui-state-highlight" )
.find( "p" )
.html( "FULL!" );
$(ui.draggable).appendTo($(this));
}
});
//Tab Interface
$( "#tabs" ).tabs();
});
</script>
</head>
<body>
<!-- Inventory tabs-->
<div id="tabs">
<ul>
<li>Equipment</li>
<li>Consumables</li>
<li>Items</li>
</ul>
<div id="tabs-1" class="inventoryTab" >
</div>
<div id="tabs-2" class="inventoryTab" >
<div id="potion" class="draggable">
<img src="sprites/potion.png" alt="potion" title="Minor Health Potion">
</div>
</div>
<div id="tabs-3" class="inventoryTab" >
</div>
</div>
<br>
<!-- The Bin --->
<h1>The BIN</h1>
<div id="droppable" class="ui-widget-header">
<p>Empty!</p>
</div>
UPDATE: I've come up with a bandaid solution that sets an exact position, that I suppose I could change using variables based on how many objects are in the bin. Check our this code for droppable event:
//droppable elements
$( "#droppable" ).droppable({
drop: function( event, ui ) {
$( this )
.addClass( "ui-state-highlight" )
.find( "p" )
.html( "FULL!" );
$(ui.draggable).appendTo($(this));
$(ui.draggable).css({
'top': '10px',
'left': '10px'
});
}
});
I'd prefer it if the object got the mouse position when it was dropped, but that's where my jQuery is failing me right now. I'll keep looking.
JSFIDDLE

It seems like you don't need this line $(ui.draggable).appendTo($(this));
//functions
$(function () {
//Dragable Elements
$(".draggable").draggable({
revert: "invalid"
});
//Hover Text
$(document).tooltip();
//droppable elements
$("#droppable").droppable({
drop: function (event, ui) {
$(this)
.addClass("ui-state-highlight")
.find("p")
.html("FULL!");
//$(ui.draggable).appendTo($(this)); // comment this out
}
});
//Tab Interface
$("#tabs").tabs();
});
JSFIDDLE DEMO