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

append onclick function to div jquery

I'm trying to add an on click function to a div using these lines of code but the click event doesnt trigger the alert.
var str="<script>$(this).on(\"click\",function(){alert('hello');})";
str+="<";
str+="/script>";
$("div:contains('Send')").last().append(str);
I've also tried this and $(this)[0] but these give me the error this.on/ $(this)[0].on is not a function
I don't know what Im doing wrong and would appreciate any and all help on the matter.

Shouldn't have to go through the trouble of creating strings for script. You can just use jquerys .on and register it with a click event.
$("div:contains('Send')").last().on("click", function () {
alert('hello');
})

If you are using jQuery, you can add click event to all the div by using $("div") for selector (just remember to call the function after you load the div)
I have create an example of simple click function
$(".start").click(function() {
$(this).toggleClass("onClick");
})
http://jsfiddle.net/7j6s2Lws/2/
The $(this) will identify which object is actually trigger the event, and choose it only. In my case, if you click on a div, it will change color (of it and only it)

i would choose a slightly different approach. i hope i understood your problem right even though i dont really get what you want to achieve by putting <script> into your string here... maybe this helps:
html
<div id='container'>
<button>Send</button>
</div>
js
var $container = $("div:contains('Send')");
var elementToAppend = "<div class='myClass' style='width:100px; height:100px; border: 1px solid red'>added dynamically ... click me</div>";
appendToContainer($container, elementToAppend);
$('.myClass').click(function($element) {
alert(123);
});
function appendToContainer($container, element) {
$container.append(element);
}
fiddle
http://jsfiddle.net/2pofLnb7/2/

onClick and href conflict in Firefox

I tried implementing an HTML anchor with the following:
<a href="#some-id" onClick="showDiv(event)">
The code of showDiv():
function showDiv(e) {
jQuery("#container").show(1500);
}
Inside #container there is a child node with id some-id.
The function showDiv() shows a particular hidden element containing a child with id some-id. The intention is to make this anchor a button, and when users click it it shows the element and directs the user to the child with the id. This works fine in Chrome, however in Firefox it will show the element but the redirection will not work. Is there anyway I can fix this?

There is a similar question here
HTML simple anchor link doesn't work in Chrome/Firefox
I think its an anchor issue where firefox doesn't think they are unique.

Here's an alternative. Assuming this markup:
<a id="trigger">Click me</a>
<div id="container">
<a id="some-id">Hello</a>
</div>
You could do it like this:
function showDiv() {
jQuery("#container").show(1500, 'swing', function(){
jQuery('#some-id').focus();
});
}
jQuery(function() {
jQuery('#trigger').on('click', showDiv);
});
I've moved the click handler out of the markup and made a strict distinction between the two stages of the process targeting the some-id element in a callback from the original show call.

jquery function onclick (span class) from jquery datepicker

hi jquery folks I have a jquery datepicker from jqueryui.com/datepicker/‎. Now i want to add some custom features to it.
The first question, If I enter the source of my page i cannot see the printed jquery code.
Only when I inspect the element(in opera) I can see the printed html. I hope this is not a problem..
When i click on the Next (span)button, i want to do some things. But the problem is I am not able to attach a function to the span class. I tried the following:
$(document).ready(function () {
$('.ui-icon.ui-icon-circle-triangle-e').click(function(){
window.alert("it works");
});
});
this code appears when I inspect the element:
<a class="ui-datepicker-next ui-corner-all ui-state-hover ui-datepicker-next-hover" data-handler="next" data-event="click" title="Next">ev
<span class="ui-icon ui-icon-circle-triangle-e">Next</span>
</a>
How can this function on click work?

you have the selector wrong
.ui-icon ui-icon-circle-triangle-e
Looks for a element with class ui-icon-circle-triangle-e inside another element with class ui-icon.
When you want to select an element that has more than one class applied to it they need to be seperated by a period .
use
$("body").on('click', ".ui-icon.ui-icon-circle-triangle-e",function(){
window.alert("it works");
});
or just
$("body").on('click', ".ui-icon",function(){
window.alert("it works");
});

You are not calling it properly, it needs to be:
$('.ui-icon.ui-icon-circle-triangle-e').click(function(){
alert ('it works');
});
You made a blank instead of a point between your two classes in jquery.

$(document).ready(function () {
$('.ui-icon.ui-icon-circle-triangle-e').off('click').on('click',function(){
alert("Working");
});
});
If you are attaching event directly on the element better to use off and on.
Cheers !!

jQuery function to only run on the element clicked

I'm trying to implement an accordian style box on some content. However there are 4-6 of these boxes on 1 template, all with different classes for obvious reasons. However I want to try and make the code as easy to read as possible and I don't want to duplicate the code for each class name. I'm assumung jQuerys (this) method would work but i'm not 100% sure how to use it.
Here is my JS code:
<script type="text/javascript">
$(document).ready(function(){
$(".block-50_hoverHeader").click(function (){
//alert("clicked");
$(".scrollText").slideToggle(1000);
});
});
</script>
So the .scrollText class is the div that holds all the content which needs to be displayed after the onClick function. But currently when I click the header all the .scollText divs appear on the page. So i want it to only appear on the parent header div that is being clicked.
Here the HTML:
<div class="block-50 left textHoverWrapOne">
<img src="" alt="" /> (Image working as BG Image)
<div class="block-50_hoverHeader"><p>This is a header!</p></div>
<div class="block-50_textHoverOne trans_click scrollText">
This is the content that needs to be displayed after the
</div>
</div>

Find the scrollText relative to the clicked block-50_hoverHeader element. In this case it is the next sibling, so you can use .next()
Inside the event handler this points to the element in which the handler is registered, in this case it is the block-50_hoverHeader element, so we can find the next scrollText using $(this).next()
jQuery(function ($) {
$(".block-50_hoverHeader").click(function () {
$(this).next().slideToggle(1000);
});
});
Demo: Fiddle

There are a number of ways to accomplish this. I prefer to grab the shared parent and then use find as I find this is a bit less likely to break due to minor modifications to the html structure.
$(".block-50_hoverHeader").click(function (){
$(this).closest(".textHoverWrapOne").find(".scrollText").slideToggle(1000);
});

Why not targeting the whole div??
jQuery(function ($) {
$(".block-50").click(function () {
$(this).find('.scrollText').slideToggle(1000);
});
});