We Keep Coding

Trigger a click on a span using jQuery

I want to click a span using jQuery. (I'm using rails and foundation)
<div class = "row my-row" id="current-my-row">
<div class = "large-12 my-row-heading" id="my-row-click">
<%= image_tag "some_img.png"%>
<span class="title">This is the title</span>
<span class="details"><%= image_tag "other_img.png"%>DETAILS</span>
</div>
<div class = "large-12 my-row-details">
all details
</div>
</div>
I have a jQuery function:
$('.details').on("click", function() {
.... whatever I want it to do...
//my-row-details slides down.
}
On clicking "DETAILS", whatever I want it to do happens.
But, as part of another jQuery function I want to trigger a click on it.
I tried :
$('.details').click();
$('.details').trigger("click");
$('#my-row-click .details').click();
$('#my-row-click').trigger("click");
$('.details').trigger("click");
$('#my-row-click > span:nth-child(3)').click();
$('#my-row-click > span:nth-child(3)').trigger("click");
But I can't seem to trigger a click. i.e. my-row-details does not slide down.
Any help?
UPDATE:
commented all the other code: (assume this is all the function on click does)
$('.details').on("click", function() {
$('.my-row-details').slideDown();
}
Instead of triggering a click, I tried replacing it with this line:
`$('.my-row-details').slideDown();`
This won't work either. But it works if I actually go click "DETAILS"

Both .click() and .trigger("click"); should actually work.
However, triggering an event, defined in your own code, sounds like a bad idea.
There is a better way to do this:
function openDetails() {
// Whatever you want to do
}
$('.details').on("click", openDetails);
"as part of another jquery function":
openDetails();
That way, you can be sure that this behavior is achieved, in a clear and readable way.

Found the problem.
The function that was calling the click() was to be executed on page load. Not on an event. And I had specified $('.my-row-details').hide(); on page load as well. Both of them were contradicting each other.
The solution was to specify display: none for my-row-details in css. And then call .click(); from jquery.

First check whether the click for that span is working or not by keeping an alert inside the click function, if it is not working then try this
$('.details').live('click', function(){
//your logic goes here
});
or your can try this
$(".details").bind("click", function(){
//your logic
});
Hope it works

click event not working jQuery

I am trying to handle the click event using jQuery
on upload success, I am creating the following using jQuery:
$("#uploadedImage").append( "<div class='img-wrap'>
<span class='deletePhoto'>×</span>
<img data-id='"+files[i]+"' src='"+asset_url+"uploads/ad_photo/"+files[i]+"'>
</div>
<span class='gap'></span>");
and for handling click event for the above created div's I have written this:
$('.img-wrap .deletePhoto').click(function() {
var id = $(this).closest('.img-wrap').find('img').data('id');
alert(id);
});
the above code is working properly and creates all div, but when I click on the deletePhoto span. no jQuery alert is showing.
Any help or suggestion would be a great help.
Thanks in advance

delegate the event and change as suggested:
$("#uploadedImage").on('click', '.deletePhoto', function() {
You have to delegate your event to the closest static parent #uploadedImage in your case which is available on the page load like the container which holds the newly appended div and image.
although $(document) and $(document.body) are always available to delegate the event.

It is better to use on() when you create new element after DOM has been loaded.
$(document).on('click', '.img-wrap .deletePhoto', function() {
});

You are creating your element dynamically that is why you would need .live()
but this method is deprecated in newer version.
if you want to use jquery 1.10 or above you need to call your actions in this way:
$(document).on('click','element',function(){
`your code goes in here`
})

try this:
$(".img-wrap .deletePhoto").on('click', function() {
});

You can change a little in your code.
$(".deletePhoto").off("click").on("click",function(){
//Your Code here
});

First check in debugging mode that you get length when your code is going to bind click event and another thing bind event must written after that element is appended.
And Also check css of your element (height and width) on which you are clicking and yes
$(document).on('click','Your Element',function(){
//your code goes in here
});
Will works fine

use delegate:
$('#uploadedImage').on('click','.img-wrap .deletePhoto',function() {
var id = $(this).closest('.img-wrap').find('img').data('id');
alert(id);
});
see details delegate and .on here

jQuery code doesn't work on Google Chrome?

This code doesn't work on google chroome but works on Firefox, opera, and IE
function show() {
$('#networks').click(function () {
$('#social').slideDown(1000);
$('#face,#twitter,#google,#youtube,#rss').fadeIn(2000)
});
$('#networks').blur(function () {
$('#face,#twitter,#google,#youtube,#rss').fadeOut(1000);
$('#social').delay(1000).slideUp(1000);
});
}
at the same documents after this code i wrote the code below and work on google chroome and all other browsers, why this code works well in google chroome but above doesn't ???
function UseData() {
$("#submit").click(function () {
$(this).val("");
$(this).animate({
width: '250px',
}, "slow")
});
$("#submit").blur(function () {
$(this).val("Search");
$(this).animate({
width: '175px',
}, "slow");
});
}
thanks

http://jsfiddle.net/A4CJz/10/
I believe the effect you want is this:
when the mouse hovers over the element (not focus) then show the social menu
when the mouse leaves the element (not blur) then hide the social menu
Your markup was atrocious. That's why it wasn't working in chrome. You really need to learn valid markup and valid JS before this solution will be helpful. In particular, you cannot wrap an a tag around an li tag in a list. The only valid child of ul is li.
You also don't need to id each of the li elements and target them directly. A quick lesson in jquery will show you that you can target by the tag name, which you will see me do in the example fiddle I posted, as such: $('#social li')
I also did away with your inline JS and used jquery to wire up the mouseenter and mouseleave events.
I recommend you study the code carefully and try to understand how and why I restructured your code the way I did.

Okay, at the first your fiddle depends on jQuery so you've to include it. The second thing is that you've to load your script in the head to work with inline-code. (onclick-handlers on html-tags). Otherwise your function 'll be undefined ;-)
But to point out what your real problem is, there's nothing special needed. An a-tag cannot handle focus or blur-events.
You can read more here: http://api.jquery.com/focus/#entry-longdesc
The working fiddle:
http://fiddle.jshell.net/A4CJz/3/
Another tip, prevent the default action of your attached event, to kill its normal behaviour. Simply done with preventDefault on the event-object or an simple return false at the end of your event-handler function.
Update
http://fiddle.jshell.net/A4CJz/12/

Why the jQuery remove is adding an extra element in the dropdown?

See this fiddle..
HTML:
<select>
<option>hey1</option>
<option>hey2</option>
<option>hey3</option>
<option>hey4</option>
<option>hey5</option>
</select>
jQuery:
$(document).ready(function () {
$('select').on('click',function(){
$("option:first",this).remove();
$(this).unbind('click');
});
});
When I run the above code in google Chrome(latest version), the first element is removed but it appends an extra element at the bottom. Why is it behaving like that.
Any ideas? pretty unexpected ..
EDIT:
This picture is for the ones who are not able to see any error..

Looks like a rendering bug in Chrome. You can't actually click on the last hey5 and the DOM doesn't actually create a second one. You can get around this via mousedown:
$('select').one('mousedown',function(){
$("option:first",this).remove();
});
jsFiddle example

I'm pretty sure it's a bug, another fix is using focus event :
$('select').on('focus', function(){
$("option:first", this).remove();
$(this).unbind('focus');
});
fiddle: http://jsfiddle.net/F8E7L/

jquery .live() and .append()

So I'm currently using .append() to add a feature to all of the posts on a webpage, but when additional posts are loaded on the page, the appended features aren't included in the new content — I'm trying to come up with a way to make sure all of the new content has the appended feature too.
$(this).append('<div id="new_feature></div>');
Something like this?
$(this).live().append('<div id="new_feature></div>');
Maybe there's a way to make it constantly appending in a loop perhaps?

There is DOMNodeInserted event:
$('button').click(function() {
$('#appendme').append($('<div class="inner">').text(Math.random()));
})
$('#appendme').on('DOMNodeInserted','.inner',function() {
console.log(this);
});
DEMO
update: this seems not works in IE, try propertychnage event handler also ($('#appendme').on('DOMNodeInserted,propertychange') but i not sure, have no IE to check this right now.
update2: Domnode* seems deprecated according to mdn, they tell to use MutationObserver object instead
update3: seems here is no very crossbrowser solution for MutationEvents, see this answer, so my suggestion would be use code above, if event supported and fallback to setTimeOut or livequery option.
update4:
If you depend only on .append() you can patch jQuery.fn.append() like this:
jQuery.fn.append=function() {
return this.domManip(arguments, true, function( elem ) {
if ( this.nodeType === 1 || this.nodeType === 11 ) {
this.appendChild( elem );
$(elem).trigger('appended');
}
});
};
$('button').click(function() {
$('#appendme').append($('<div class="inner">').text(Math.random()));
})
$('#appendme').on('appended','.inner',function() {
console.log(this);
});
DEMO2
may be more correct is to spoof jQuery.fn.domManip like here

jQuery documentation:
Use of the .live() method is no longer recommended since later versions of jQuery offer better methods that do not have its drawbacks.
You can use setTimeout() function that can check for new <div>s every n milliseconds.
$(function(){
setInterval("Check4NewDivs();",1000);
});
So say this is a div with class="comment newdiv", so when it appears on the page for the first time, it has the class newdiv that will let the function know it was just dynamically created.
function Check4NewDivs(){
$(".comment .newdiv").each(function(){
$(this).append('<div class="new_feature"></div>').removeClass("newdiv");
});
}

It's append not appened.
live is a deprecated event handler. It's not used this way. use on instead.
http://api.jquery.com/live/
So, the following code will run when you click selector.
$(document).on('click', 'selector', function() {
$(this).append('<div id="new_feature></div>');
});

No, there is no standard way to do it like that. There was a proposal of the events that would be fired whenever the DOM elements are inserted etc., but you cannot rely on that.
Instead rely on either:
(preferably) callbacks - just invoke function ensuring existence of such appended snippets, whenever you pull something (but after you successfully pull it from server and insert into DOM, not sooner), or
constant checks - like using in setInterval() or setTimeout(), but this would be unnecessary processing and you will never get instant append, unless you will perform processing-heavy checks all the time,

use the on load function:
$(item).on('load',function(){
$(this).append('<div id="new_feature"></div>');
});
This will add append the item as a callback once the item has been loaded. I would also choose some sort of dynamic ID creator rather than always append stuff with the same ID, but thats just me.

you must bind to an element that already exists on the page. i have written an example where i make appended content live.
DEMO on JSFiddle
HTML
<div id="container">
<div id="features">
</div>
<br />
<a href='#' id='clickme'>click me to add feature</a>
</div>
JS
$(function() {
$('#clickme').on('click', function(e) {
$('#features').append('<div class="new_feature">new feature</div>');
});
$('#features').on('click', '.new_feature', function() {
alert('i am live.');
});
});