Develop Reference

add spinner in the place of button on click event

I want to add a spinner below or in the place of the button on click event. I am trying with something like this.
not able to get this working.
Here's the fiddle.
<div class = "example test">
<img src="http://www.fordesigner.com/imguploads/Image/cjbc/zcool/png20080526/1211776983.png" onclick="$('.test').click();">
<div id="justamoment" style="text-align: left;font-family: Signika;color: white;font-size:14px;font-weight: bold;text-decoration: none;visibility:hidden">
<p>
<img src="http://www.ajaxload.info/cache/FF/FF/FF/00/00/00/1-0.gif" height="12" width="12" Just a moment..
</p>
</div>
<script>
$(".test").change(function(){
$("#justamoment").css("visibility","visible");
});
</script>
Please help.

You need to have a click handler not change
$(".test").click(function () {
$("#justamoment").css("visibility", "visible");
});
Demo: Fiddle

Try this
USe 'click' instead of 'change' . It will work
Wokring fiddle fine

What about this :
$(".test").click(function () {
$("#justamoment").css("visibility", "visible");
});
DEMO

jQuery blur() not listening to $(this)

Followed by the HTML DOM:
<div class="opt">
Options
<div class="panel">
<h3>i am in panel!!</h3>
</div>
</div>
When i click on the .opt it would show the .panel content, but then i need to trigger another event to hide the .panel when clicking outside of the .opt element.
jQuery:
$('.opt').click(function(){
var $this = $(this);
$this.find('.panel').fadeIn();
$this.blur(function(){
$this.find('.panel').fadeOut();
alert('i am from blur');
});
});
Here is a demo JsFiddle
But the blur() method is not executing, what i am doing wrong here technically?

You can try a click event on body instead of blur. Take a look at
https://jsfiddle.net/y0wsfpvb/7/
$('.opt').click(function(){
var $this = $(this);
$this.find('.panel').fadeIn();
});
$('body').click(function (e){
if( $(e.target).closest(".opt").length > 0 == false) {
$('.panel').fadeOut();
alert('fake blur');
}
});

This works if you define de tabindex property for the div...
Try:
HTML
<div class="opt" tabindex="3">
Options
<div class="panel">
<h3>i am in panel!!</h3>
</div>
</div>
JS
$('.opt').click(function(){
$(this).find('.panel').fadeIn();
$(this).blur(function(){
$(this).find('.panel').fadeOut();
alert('i am from blur');
});
});

You could bind the fade out action to the body's on click handler, and then add:
event.stopPropagation();
to your opt class click handler to achieve this.
Here is an example on codepen

Find the id by class in nested div jquery

I have an html like this
<div class='click' id='1'>
one
<div class='click' id='2'>
two
<div class='click' id='3'>
three
<div class='click' id='4'>
four
<div class='click' id='5'>
five
</div>
</div>
</div>
</div>
if i have and click event on class click ,there is any way to return the id of which i click
such as
$('.click').click(function(){
alert('id whitch i click')
});
Becase if i click on three i allway get the id of one and two three.

Sure, just do this:
$('.click').click(function(e){ //e=event
alert($(this).attr("id")); // alert clicked element's id
e.stopPropagation(); // stop event propagation so it doesnt propagate to click 1 and click 2
})
Update: As mentioned by Felix Kling, you can access de DOM directly and use:
alert(this.id);

Demo: http://jsfiddle.net/tzJUN/ using this.id http://jsfiddle.net/c65x9/
If you keen : jQuery attr vs prop?
Stop propogation will stop the click event the event from bubbling up the DOM tree, preventing any parent handlers from being notified of the event.
API:
.stoppropagation - http://api.jquery.com/event.stoppropagation/
Code
$(document).ready(function () {
$('.click').click(function (event) {
event.stopPropagation();
alert($(this).prop("id")); //<< --- or this.id
});
});

$('.click').click(function(e){
$(this).attr("id");
alert($(this).attr("id"));//here you can see your clicked id
})

Yes. its simple
$(document).ready(function(){
$('.click').click(function(){
var ID=$(this).attr('id');
alert(ID);
//This ID varible will return ID of the Div Clicked
});
});

append UI element only once and avoiding event propagation

I have a problem with my ui element (icon) with is a holder for draggable() function. the icon should append on click only once. The problem with my code is that when I am clicking on the icon it runs the code again and appending the next icon.
How avoid the event propagation in this case.Is there a better way to use the one() function here.
my code:
HTML structure:
<div class="editor">
<h1>Title</h2>
<p>paragraph</p>
<img src="">
</div>
<div class="editor">
<h1>Title</h2>
<p>paragraph</p>
<img src="">
</div>
<div class="editor">
<h1>Title</h2>
<p>paragraph</p>
<img src="">
</div>
JS:
$(document).on('click', '.editor *', function(event) {
$(this).resizable();
$(this).draggable({ handle: ".editor-move" });
$(this).one($(this).append("<i class='icon-move editor-move'></i>"));
return false;
});

Firstly, you need to make sure that the current target of the event is not the icon-move element, if so then exit.
if ($(event.target).hasClass("icon-move"))
return false;
Secondly, check whether the icon has been added already on subsequent clicks to avoid added multiple icons for the same element.
if($(".icon-move",this).length==0)
$(this).append("<i class='icon-move editor-move'></i>");
JSFiddle

$(document).on('click', '.editor *', function(event) {
event.stopPropagation();
$(this).resizable();
$(this).draggable({ handle: ".editor-move" });
$(this).one($(this).append("<i class='icon-move editor-move'></i>"));
return false;
});

Try
$(document).one('click', '.editor *', function(event) {
$(this).resizable();
$(this).draggable({ handle: ".editor-move" });
$(this).append("<i class='icon-move editor-move'></i>");
return false;
});

jquery sender BY CLASS

<img href="a" class="myImg"></img>
<img href="b" class="myImg"></img>
<img href="c" class="myImg"></img>
How can I determine the href value of the image being clicked maybe by tracking click events on elements using css class myImg. You can also modify the html if it simplifies the jquery.Thanks

$('img.myImg').click(function(){
alert(this.href); //might not work
alert(this.getAttribute('href')); //definitely should work
});

$('.myImg').click(function() {
alert($(this).attr('href'));
});

Try this
$('.myImg').click(function(){
alert($(this).attr('href'));
});

$(document).ready(function() {
$(".myImg").click(function(e) {
alert($(this).attr("href"));
});
});

"img" tag doesn't have a "href" attribute. You have to put those images between link tags ("a");
<img src=".." class="myImg">
<img src=".." class="myImg">
<img src=".." class="myImg">
Then if you want to get the href, listen for the click event on the link;
$('a').click(function(e) {
console.log('selected href:', $(this).attr('href'));
// if you want you can stop executing the href
// e.preventDefault();
});
Check http://jsfiddle.net/demods/U7D2g/