I want one script to have multiple events (jQuery), based on what event is triggered it will load up different content on the same div. Does that make sense or do I have to have multiple ID's ?

Recommended Answers

All 22 Replies

It is possible to bind more than one event on an element.

I chain the events ('triggerA','triggerB','triggerC') etc ?

what kind of events are you trying to catch?

From some anchors !

The original script has an onClick for an anchor, I want a function for each event.

$('anchor','anchor2','anchor3').onClick(function...)

There are three events in the above script, depending on what event is clicked of the three a different HTML page would load. Instead of creating a event for each anchor.

Member Avatar for diafol
$('#anchor, #anchor2, #anchor3').click(function(){ ... });

When you say multiple events - do you mean one method, but multiple targets?

$('#anchor, #anchor2, #anchor3').click(function(){ ... }).hide('fast');

That's an example of chaining methods

Do you mean multiple events and multiple targets, each event does does almost the same thing, except load a different DIV. I assume you can't have jQuery load different content within the same DIV (HTML/CSS etc) you need multiple DIV's, correct ?

The second question from my understanding is no, maybe I'm wrong.

Multiple Targets, Multiple Methods !

Member Avatar for diafol

WTF? Please articulate your needs clearly, you're not making any sense.

Maybe something like this:

$('#anchor, #anchor2, #anchor3')
    .click(function(){ ... })
    .dblclick(function(){ ... })
    .hover(function(){ ... });

Thanks AndrisP that is what I meant.

I have one question, does it work in the order of the chain, for example #anchor1 is associated with .click, #anchor2 is associated with .dbleclick etc ?

Member Avatar for diafol

I have one question, does it work in the order of the chain, for example #anchor1 is associated with .click, #anchor2 is associated with .dbleclick etc ?

No

Thanks AndrisP that is what I meant.

I thought I'd already given that example...

$('#anchor, #anchor2, #anchor3').click(function(){ ... }).hide('fast');

Oh well.

Consider using data-* attributes for keeping info if you want to alter the result of a method if you're using multiple targets.

<p id="anchor" data-id="4">...</p>

The data attribute may be just what I want :) Thanks. Sorry for the confusion regarding this question !

Member Avatar for diafol

Thanks. Sorry for the confusion regarding this question !

heh heh - don't worry, I'm used to it :)

I never knew about the data- attribute in HTML5. How would I use this in jQuery if I had a chain of anchors and each anchor should load a different DIV within the same page ?

Most importantly, can jQuery change the content on a DIV or must I have multiple DIV for the page each DIV representeting the different content I want to show which is linked with the each anchor in the chain of anchors in the jQuery ? For example $("anchorA","anchorB").click() anchorA is linked with a DIV on the page called "ContentA", anchorB is linked with a DIV on the page called "ContentB" or is jQuery powerful enough to literally change the content on the DIV so each anchor loads the same div on the page, but is smart enough to know that a different anchor was clicked in the chain and so the content must be changed before doing whatever the script does, that means, whatever presentational things the script has etc ?

Instead of doing this ... $("anchorA","anchorB").click(), assign both divs the same class. Then just use the class name as the selector.

$(".anchor-class").click()

Then to reference which element was clicked you use: $(this)

That's how jQuery knows which one was clicked.

diafol mentioned the data attribute, how could this be used instead of classes, or is it almost identical ?

The data attribute can be used as a selctor as well. There are many ways to select your elements. Its up to you on which seletor works best.

You should read up on selectors so you have a better understanding about them.

But with regards to the data attribute, it's better used to store information that isnt necessarily to be used to display on the screen. Think of the data attribute a vehicle for you to be able to create your own custom attributes and store values in those attributes, almost like a variable.

Data attribute is as you said another way to do things. I could get the ElementByID, then once I have that, get the dataset or I could apply a class. Thanks :)

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.