Jquery Selector not working on Internet Explorer

Question

Internet Explorer does not like my Jquery selector. Not sure if it's my weak Jquery skills or general Explorer strangeness.

Here is the Code:

$("#field_"+index+" #field_Label").val();

[div field_1]

<input id="field_Label" //... you get the picture.

to explain this.. I have a DIV labeled field_1, field_2.. etc.. Internet explorer appears to find the first iteration, but cannot find the second.

Thank you all, and thanks to you stackoverflow.

Is there a better way I should be doing this ?..

Here is a more complete snippet:

<li id="blank">
<div  id="field_1" style="background: #BDCFFF; color: #1028BD;margin: 10px; border: 1px solid black;width: 400px; height: 100px;">
<table>
<tr><td>Label:</td><td><input class="field_Label" id="field_Label" type="text"/></td></tr>
<tr><td>Type:</td><td><input id="field_Type" type="text" value="2"/></td></tr>
<tr><td>Id:</td><td><input id="idField" type="text" value="0"/></td></tr>
</table>

</div>

Answer 1

Separate each selector with a comman:

$("#field_" + index + ", #field_Label")...........

Answer 2

you should give your div's a class and do

 var inputvals = $('.class_name').val();

then you can do what you want with them as a whole and you don't have to comma seperate a bunch of ids

Answer 3

Try using a class on the input instead of id. Only one input should have id field_Label.

<input class="field_Label" />
selector: $("#field_"+index+" .field_Label").val();

This is an update considering the code snippet you added. I rewrote it changing id to class.

<div  id="field_1">
<table>
<tr><td>Label:</td><td><input class="field_Label" type="text"/></td></tr>
<tr><td>Type:</td><td><input class="field_Type" type="text" value="2"/></td></tr>
<tr><td>Id:</td><td><input class="idField" type="text" value="0"/></td></tr>
</table>
</div>

Selectors:
var label = $("#field_1 .field_Label").val();
var type = $("#field_1 .field_Type").val();
var id = $("#field_1 .idField").val();

Class instead of id if you are going to have many tables with same kind of input. Otherwise if the inputs are unique just use id, example: selector: $("#idField").val()

Answer 4

Change #field_Label to .field_Label and then access

$("#field_"+index+".field_Label").val();

Without a space beween the values, so the output would be #field_1.field_Label - (Ie likes specifics)

Answer 5

Thanks everyone for the help.. I did finally resolve this.. it was just strange since it only seemed to cause a problem with Internet Explorer.. but this is what I did to get it working.

$("#field_"+index).find("#field_Label").val();

/* Long live StackOverflow !! */

Answer 6

Thanks everyone for the help.. I did finally resolve this.. it was just strange since it only seemed to cause a problem with Internet Explorer.. but this is what I did to get it working.

$("#field_"+index).find("#field_Label").val();

/* Long live StackOverflow !! */

You saved me HOURS of time. Thank you!!! IE is the devil

Answer 7

Thanks everyone for the help.. I did finally resolve this.. it was just

strange since it only seemed to cause a problem with Internet Explorer.. but this is what I did to get it working.

$("#field_"+index).find("#field_Label").val();

/* Long live StackOverflow !! */

As others have stated, the innermost .find() is not necessary and overly redundant.

Essentially, IDs are the fasted method of selection with jQuery's Sizzle selector engine. Using a unique ID, selection is the fastest method. Descending an ID from another ID only adds unnecessary additional computation. You most likely won't experience any performance slow-downs, but it's not a good habit to get into.

This is what you should be doing to access that element:

$("#field_label").val();

Source: http://www.artzstudio.com/2009/04/jquery-performance-rules/