javascript - Trigger a click on a span using jQuery - Stack Overflow

admin管理员组

文章数量:1390334

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: mented 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"

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: mented 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"

• javascript
• jquery
• jquery-events

Share Improve this question Follow edited Aug 27, 2021 at 14:13 Brian Tompsett - 汤莱恩 5,8937272 gold badges6161 silver badges133133 bronze badges asked Sep 14, 2016 at 3:39 smanvi12smanvi12 58188 silver badges2424 bronze badges 6

• $('.details').trigger("click"); should work. There's something else going on, try posting the code. – Tibrogargan Commented Sep 14, 2016 at 3:42
• even thios $('.details').click(); should work can you check for errors? – guradio Commented Sep 14, 2016 at 3:45
• try alert($('.details').length); just before firing $('.details').click(); and see what count you get. – vijayP Commented Sep 14, 2016 at 3:46
• rather than triggering a click event on the .detail - which then calls a function to slide something down - why don't you simply call the function that the click invokes? – gavgrif Commented Sep 14, 2016 at 3:46
• @vijayP I get length 1 – smanvi12 Commented Sep 14, 2016 at 3:53

 |  Show 1 more ment

3 Answers 3

Sorted by: Reset to default 3

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

本文标签： javascriptTrigger a click on a span using jQueryStack Overflow