Same Div called Error in Jquery

Question

Hi, I'm new to JQuery. I'm having a

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

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

Eg .. 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 dtop the first change not to be 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. http://stackoverflow.com/questions/950037/same-ajax-called-twice-jquery Please suggest me..

Answer 1

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

Answer 2

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

Answer 3

You miss a dot:

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

And you can't use the same name twice.

Answer 4

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...

Answer 5

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.