Run jQuery function onclick

Question

so i implemented a bit of jQuery that basically toggles content via a slider that was activated by an <a> tag. now thinking about it id rather have the DIV thats holding the link be the link its self.

the jQuery that i am using is sitting in my head looks like this:

<script type="text/javascript">
function slideonlyone(thechosenone) {
 $('.systems_detail').each(function(index) {
      if ($(this).attr("id") == thechosenone) {
           $(this).slideDown(200);
      }
      else {
           $(this).slideUp(600);
      }
 });
}
</script>

i was using this as a index type box so there are several products when you click on the <a> tag that used to be an image* it would render a bit of content beneath it describing the products details:

<div class="system_box">
  <h2>BEE Scorecard database</h2>
  <p>________________</p>
  <a href="javascript:slideonlyone('sms_box');"></a>
</div>

the products details are wrapped in this div.

<div class="systems_detail" id="sms_box">
</div>

so when you click on what used to be a image* it would run the slideonlyone('div_id_name') function. the function above then first closes all the other divs with the class name 'system details' and then opens/slides the div with the id that was passed into the slideonlyone function. that way you can toggle products details and not have them all showing at once.

note i only kept the <a> tag to show you what was in there i will be getting rid of it.

note: i had an idea of just wrapping the whole div in an <a> tag but is that good practice?

So now what i am wondering is since you need JavaScript to run onclick on a div tag how do you write it so that it still runs my slideonlyone function?

You should post more of the HTML so we can see how `sms_box` and `system_detail` is marked up as well, that way someone could probably give you a proper event handler without the inline JS. — adeneo, Jan 28 '13 at 08:12
For understanding jQuery event handlers, see the [jQuery `bind()` method](http://api.jquery.com/bind/) that allows you attach event handlers (like your function) to elements, and the [jQuery mouse events documentation](http://api.jquery.com/category/events/mouse-events/) for shorthand of common events. — Boaz, Jan 28 '13 at 08:33
so could i do something like this $(this).attr("id").bind('click', function() { place my slideonlyone function here ]); — legendary_rob, Jan 28 '13 at 08:57

score 23 · Accepted Answer · edited May 23 '17 at 12:00

Using obtrusive JavaScript (i.e. inline code) as in your example, you can attach the click event handler to the div element with the onclick attribute like so:

 <div id="some-id" class="some-class" onclick="slideonlyone('sms_box');">
     ...
 </div>

However, the best practice is unobtrusive JavaScript which you can easily achieve by using jQuery's on() method or its shorthand click(). For example:

 $(document).ready( function() {
     $('.some-class').on('click', slideonlyone('sms_box'));
     // OR //
     $('.some-class').click(slideonlyone('sms_box'));
 });

Inside your handler function (e.g. slideonlyone() in this case) you can reference the element that triggered the event (e.g. the div in this case) with the $(this) object. For example, if you need its ID, you can access it with $(this).attr('id').

EDIT

After reading your comment to @fmsf below, I see you also need to dynamically reference the target element to be toggled. As @fmsf suggests, you can add this information to the div with a data-attribute like so:

<div id="some-id" class="some-class" data-target="sms_box">
    ...
</div>

To access the element's data-attribute you can use the attr() method as in @fmsf's example, but the best practice is to use jQuery's data() method like so:

 function slideonlyone() {
     var trigger_id = $(this).attr('id'); // This would be 'some-id' in our example
     var target_id  = $(this).data('target'); // This would be 'sms_box'
     ...
 }

Note how data-target is accessed with data('target'), without the data- prefix. Using data-attributes you can attach all sorts of information to an element and jQuery would automatically add them to the element's data object.

This is a fairly "old" post. Feel free to downvote, but please consider leaving a comment, so others would benefit from your perspective. — Boaz, Sep 05 '17 at 09:15

fmsf · Answer 2 · 2013-01-28T09:07:20.733

7

Why do you need to attach it to the HTML? Just bind the function with hover

$("div.system_box").hover(function(){ mousin }, 
                          function() { mouseout });

If you do insist to have JS references inside the html, which is usualy a bad idea you can use:

onmouseover="yourJavaScriptCode()"

after topic edit:

<div class="system_box" data-target="sms_box">

...

$("div.system_box").click(function(){ slideonlyone($(this).attr("data-target")); });

edited Jan 28 '13 at 09:07

answered Jan 28 '13 at 08:19

fmsf

36,317
49
147
195

the reason i need to have a js reference in the html is that it uses the html's element id as a varible to find which box needs to toggle. – legendary_rob Jan 28 '13 at 08:32
just do `$(this).attr("id")` to find the ID then – fmsf Jan 28 '13 at 08:34
@TheLegend In the callback functions `$(this)` is a reference to the element that triggered the event. – Boaz Jan 28 '13 at 08:37

score 0 · Answer 3 · answered Jan 28 '13 at 08:32

0

You can bind the mouseenter and mouseleave events and jQuery will emulate those where they are not native.

$("div.system_box").on('mouseenter', function(){
    //enter
})
.on('mouseleave', function(){
    //leave
});

fiddle

note: do not use hover as that is deprecated

answered Jan 28 '13 at 08:32

gillyspy

1,578
8
14

i am not using hover its a ``tag so onclick :) – legendary_rob Jan 28 '13 at 08:36
at this hour I think the answers were merging with the questions. ok so use `'click'` event then. – gillyspy Jan 28 '13 at 08:57
sorry man someone suggested a new name for the question and i didnt read it properly! thanks for the heads up! – legendary_rob Jan 28 '13 at 08:59

THEtheChad · Answer 4 · 2013-01-28T10:34:54.377

There's several things you can improve upon here. To start, there's no reason to use an <a> (anchor) tag since you don't have a link.

Every element can be bound to click and hover events... divs, spans, labels, inputs, etc.

I can't really identify what it is you're trying to do, though. You're mixing the goal with your own implementation and, from what I've seen so far, you're not really sure how to do it. Could you better illustrate what it is you're trying to accomplish?

== EDIT ==

The requirements are still very vague. I've implemented a very quick version of what I'm imagining you're saying ... or something close that illustrates how you might be able to do it. Left me know if I'm on the right track.

http://jsfiddle.net/THEtheChad/j9Ump/

Run jQuery function onclick

4 Answers4

after topic edit:

Linked