CODEWITHSUNDEEP
jquery
useranon
useranon

Reputation: 29514

Same Div called Error in Jquery

I'm new to JQuery. I have a 

<div id='field1'>  </div>

I'm referring to it twice in my code. But at each time it refers to the same 1st reference.

E.g. I'm changing the DIV content initially with the value

$("#field1").change(function (){alert('hi')});

After some piece of code inside one another click function I'm having 

$("#field1").change(function(){alert('again')});

When I want to make use of the second change function with some other content, the first change function is called. How can I stop the first change being called and only the second one to be called?

But this second one refers to the first one. How can i rectify this? I've even used $(this) in my second change. Same Ajax called twice..JQuery

Upvotes: 1

Views: 209

Answers (5)

lambacck
lambacck

Reputation: 9926

What you are attempting to do is not clear from the way you asked the question. From what you put in code I would guess that you are trying to modify the onChange event of the div. So to start with you have:

$("#field1").change(function (){alert('hi')});

And when #field1 changes you want to fire a function that calls alert('hi')

Later you have button that runs:

$("#field1").change(function(){alert('again')});

And you want changes to #field1 to fire a function that calls alert('again')

But what you are getting when the change is happening is an alert box with 'hi' in it.

What is happening is that both alert('hi') and alert('again') are getting bound to the change event. If you want you to replace the change event, you need to first use the unbind( type, fn ) function.

If you want them both to fire, you need to 'return false;' from your change functions.

Upvotes: 7

dan richardson
dan richardson

Reputation: 3939

I think jQuery when using ID's, only ever returns one element.

If you must use the same selector name (which as Rytmis correctly stated, using multiple ID's with the same name is invalid HTML), then changing to a class selector would be best.

You can then use the :eq() functionality in jQuery

To target your first div you could use:

jQuery('.field:eq(0)')

and then to target your second div use:

jQuery('.field:eq(1)')

Remember they come back as an array so 0 = first, 1 = second, etc...

Upvotes: 0

MrHus
MrHus

Reputation: 33378

You miss a dot:

 $("#field1").change(function (){
    alert('hi');
 });

And you can't use the same name twice.

Upvotes: 0

Stephen Binns
Stephen Binns

Reputation: 765

the # selector selects an element with the ID #first1 in the html document which would be the first div since ID's are supposed to be unique.

you could use a class and the . selector to select both div's or alternatively give the second div a different name Information about selectors in jQuery

Upvotes: 0

Rytmis
Rytmis

Reputation: 32037

If you mean you have two DIVs with the same ID, that's actually invalid HTML. IDs should be unique per-document.

Upvotes: 2

Related Questions