Why is jQuery .prev() not working with dynamically generated inputs

问题内容:

In the following code var roomName = $(this).prev('.room_name').val();
works fine but var length = $(this).prev('.room_length').val(); doesn’t. Why is this, both lines of code seem almost identical in theory albeit they are referencing a different class of input.

jQuery;

// check for dimension unit

$( "#manage_property_rooms" ).submit(function( event ) {

$('.dimension_unit').not("#room_details_0 .dimension_unit").each(function() {

var dim_unit = $(this).val();
var roomName = $(this).prev('.room_name').val();
var length = $(this).prev('.room_length').val();
var width = $(this).prev('.room_width').val();

if ( (length > 0 || width > 0) && dim_unit=='' ) {

        alert("Please select the dimensions unit for the room; " + roomName);
        $(this).prop('required', true);
        event.preventDefault();

}

});
});

HTML;

  <div class="content">
  <div class="headertitle">
    <h1>Manage Property Room Descriptions for 14 Beechwood Gardens, Cressington, Liverpool, L19 0LN</h1>
  </div>
  <div class="border"></div><div class="links"><a href="edit_property.php?property_id=497">Edit Property</a> | <a href="view_property.php?property_id=497">View Property</a> | <a href="manage_property_images.php?property_id=497">Manage Property Images</a> | <a href="manage_property_rooms_order.php?property_id=497">Manage Property Rooms Order</a> | <a href="manage_property_files.php?property_id=497">Manage Property Files</a> | <a href="manage_property_tenancies.php?property_id=497">Manage Property Tenancies</a> | <a href="manage_property_tenancies_order.php?property_id=497">Manage Property Tenancies Order</a></div><form id="manage_property_rooms" name="manage_property_rooms" action="http://www.property-system-uk.com/admin-area/files/manage_property_rooms.php" method="post"><input type="hidden" id="property_id" name="property_id" value="497"><fieldset>
<legend>Property Room Information</legend>

<table class="nobord"><tr><td><input type="button" class="addRoom" value="Add Room">&nbsp;<input type="button" id="deleteAllRooms" value="Delete All Rooms"></td></tr><tr><td>The sort order of rooms can be changed on the 'Manage Property Rooms Order' page.</td></tr></table>

</fieldset><div id="room_details_0" class="room_details"><fieldset>
<legend>Room Details</legend>

<table class="nobord"><tr>
    <td>Name:</td>
    <td><input type="text" name="property_room_name[0]" maxlength="120" class="room_name" required>&nbsp;<a href="#" title="Each room name must be unique (e.g. Bedroom 1 and Bedroom 2 rather than Bedroom and Bedroom)." class="tooltip"><img src="http://www.property-system-uk.com/admin-area/img/tooltip_icon.png" height="14" width="14" alt=""></a></td>
  </tr><tr>
    <td>Dimensions:</td>
    <td><input type="text" name="property_room_length[]" maxlength="7" class="room_length"> length x <input type="text" name="property_room_width[]" maxlength="7" class="room_width"> width&nbsp;<select name="property_room_dimension_unit[]" class="dimension_unit"><option value="">Please Select</option><option value="6">Centimetres</option><option value="8">Feet</option><option value="9">Inches</option><option value="5">Metres</option><option value="7">Millimetres</option></select></td></tr><tr>
    <td>Dimension Description:</td>
    <td><input type="text" name="property_room_dimension_text[]" maxlength="120">&nbsp;<a href="#" title="Describe the room dimensions (e.g. if the room narrows or is an L-shape)." class="tooltip"><img src="http://www.property-system-uk.com/admin-area/img/tooltip_icon.png" height="14" width="14" alt=""></a></td>
  </tr><tr>
    <td>Description:</td>
    <td><textarea name="property_room_description[]" rows="6" cols="40"></textarea></td></tr><tr>
    <td>Actions:</td>
    <td><input type="button" class="delete_div" value="Delete Room">&nbsp;<input type="button" class="addRoom" value="Add Room"></td>
    </tr></table>

</fieldset></div><div id="room_details_1" class="room_details"><fieldset>
<legend>Room Details</legend>

<table class="nobord"><tr>
    <td>Name:</td>
    <td><input type="text" name="property_room_name[1]" maxlength="120" class="room_name" value="Living / Dining Room" required>&nbsp;<a href="#" title="Each room name must be unique (e.g. Bedroom 1 and Bedroom 2 rather than Bedroom and Bedroom)." class="tooltip"><img src="http://www.property-system-uk.com/admin-area/img/tooltip_icon.png" height="14" width="14" alt=""></a></td>
  </tr><tr>
    <td>Dimensions:</td>
    <td><input type="text" name="property_room_length[]" maxlength="7" value="6.00" class="room_length"> length x <input type="text" name="property_room_width[]" maxlength="7" value="3.18" class="room_width"> width&nbsp;<select name="property_room_dimension_unit[]" class="dimension_unit"><option value="">Please Select</option><option value="6">Centimetres</option><option value="8">Feet</option><option value="9">Inches</option><option value="5" selected>Metres</option><option value="7">Millimetres</option></select></td></tr><tr>
    <td>Dimension Description:</td>
    <td><input type="text" name="property_room_dimension_text[]" maxlength="120" value="">&nbsp;<a href="#" title="Describe the room dimensions (e.g. if the room narrows or is an L-shape)." class="tooltip"><img src="http://www.property-system-uk.com/admin-area/img/tooltip_icon.png" height="14" width="14" alt=""></a></td>
  </tr><tr>
    <td>Description:</td>
    <td><textarea name="property_room_description[]" rows="6" cols="40">Windows to the front and rear aspects, fire surround, radiators, carpet flooring and coving.</textarea></td></tr><tr>
    <td>Actions:</td>
    <td><input type="button" class="delete_div" value="Delete Room">&nbsp;<input type="button" class="addRoom" value="Add Room"></td>
    </tr></table>

</fieldset></div><div id="room_details_2" class="room_details"><fieldset>
<legend>Room Details</legend>

<table class="nobord"><tr>
    <td>Name:</td>
    <td><input type="text" name="property_room_name[2]" maxlength="120" class="room_name" value="Kitchen" required>&nbsp;<a href="#" title="Each room name must be unique (e.g. Bedroom 1 and Bedroom 2 rather than Bedroom and Bedroom)." class="tooltip"><img src="http://www.property-system-uk.com/admin-area/img/tooltip_icon.png" height="14" width="14" alt=""></a></td>
  </tr><tr>
    <td>Dimensions:</td>
    <td><input type="text" name="property_room_length[]" maxlength="7" value="5.44" class="room_length"> length x <input type="text" name="property_room_width[]" maxlength="7" value="2.70" class="room_width"> width&nbsp;<select name="property_room_dimension_unit[]" class="dimension_unit"><option value="">Please Select</option><option value="6">Centimetres</option><option value="8">Feet</option><option value="9">Inches</option><option value="5" selected>Metres</option><option value="7">Millimetres</option></select></td></tr><tr>
    <td>Dimension Description:</td>
    <td><input type="text" name="property_room_dimension_text[]" maxlength="120" value="">&nbsp;<a href="#" title="Describe the room dimensions (e.g. if the room narrows or is an L-shape)." class="tooltip"><img src="http://www.property-system-uk.com/admin-area/img/tooltip_icon.png" height="14" width="14" alt=""></a></td>
  </tr><tr>
    <td>Description:</td>
    <td><textarea name="property_room_description[]" rows="6" cols="40">Range of kitchen wall and base units, laminate worktops, electric oven, electric hob, extractor hood, sink with mixer tap, window to the rear aspect, glazed door to the rear aspect, vinyl flooring, integrated storage and tiled splashback.</textarea></td></tr><tr>
    <td>Actions:</td>
    <td><input type="button" class="delete_div" value="Delete Room">&nbsp;<input type="button" class="addRoom" value="Add Room"></td>
    </tr></table>

</fieldset></div><div id="room_details_3" class="room_details"><fieldset>
<legend>Room Details</legend>

<table class="nobord"><tr>
    <td>Name:</td>
    <td><input type="text" name="property_room_name[3]" maxlength="120" class="room_name" value="Master Bedroom" required>&nbsp;<a href="#" title="Each room name must be unique (e.g. Bedroom 1 and Bedroom 2 rather than Bedroom and Bedroom)." class="tooltip"><img src="http://www.property-system-uk.com/admin-area/img/tooltip_icon.png" height="14" width="14" alt=""></a></td>
  </tr><tr>
    <td>Dimensions:</td>
    <td><input type="text" name="property_room_length[]" maxlength="7" value="3.60" class="room_length"> length x <input type="text" name="property_room_width[]" maxlength="7" value="3.18" class="room_width"> width&nbsp;<select name="property_room_dimension_unit[]" class="dimension_unit"><option value="">Please Select</option><option value="6">Centimetres</option><option value="8">Feet</option><option value="9">Inches</option><option value="5" selected>Metres</option><option value="7">Millimetres</option></select></td></tr><tr>
    <td>Dimension Description:</td>
    <td><input type="text" name="property_room_dimension_text[]" maxlength="120" value="">&nbsp;<a href="#" title="Describe the room dimensions (e.g. if the room narrows or is an L-shape)." class="tooltip"><img src="http://www.property-system-uk.com/admin-area/img/tooltip_icon.png" height="14" width="14" alt=""></a></td>
  </tr><tr>
    <td>Description:</td>
    <td><textarea name="property_room_description[]" rows="6" cols="40">Window to the front aspect, integrated storage cupboard and carpet flooring.</textarea></td></tr><tr>
    <td>Actions:</td>
    <td><input type="button" class="delete_div" value="Delete Room">&nbsp;<input type="button" class="addRoom" value="Add Room"></td>
    </tr></table>

</fieldset></div><div id="room_details_4" class="room_details"><fieldset>
<legend>Room Details</legend>

<table class="nobord"><tr>
    <td>Name:</td>
    <td><input type="text" name="property_room_name[4]" maxlength="120" class="room_name" value="Bedroom Two" required>&nbsp;<a href="#" title="Each room name must be unique (e.g. Bedroom 1 and Bedroom 2 rather than Bedroom and Bedroom)." class="tooltip"><img src="http://www.property-system-uk.com/admin-area/img/tooltip_icon.png" height="14" width="14" alt=""></a></td>
  </tr><tr>
    <td>Dimensions:</td>
    <td><input type="text" name="property_room_length[]" maxlength="7" value="3.56" class="room_length"> length x <input type="text" name="property_room_width[]" maxlength="7" value="3.19" class="room_width"> width&nbsp;<select name="property_room_dimension_unit[]" class="dimension_unit"><option value="">Please Select</option><option value="6">Centimetres</option><option value="8">Feet</option><option value="9">Inches</option><option value="5" selected>Metres</option><option value="7">Millimetres</option></select></td></tr><tr>
    <td>Dimension Description:</td>
    <td><input type="text" name="property_room_dimension_text[]" maxlength="120" value="">&nbsp;<a href="#" title="Describe the room dimensions (e.g. if the room narrows or is an L-shape)." class="tooltip"><img src="http://www.property-system-uk.com/admin-area/img/tooltip_icon.png" height="14" width="14" alt=""></a></td>
  </tr><tr>
    <td>Description:</td>
    <td><textarea name="property_room_description[]" rows="6" cols="40">Combi boiler, window to the rear aspect and carpet flooring.</textarea></td></tr><tr>
    <td>Actions:</td>
    <td><input type="button" class="delete_div" value="Delete Room">&nbsp;<input type="button" class="addRoom" value="Add Room"></td>
    </tr></table>

</fieldset></div><div id="room_details_5" class="room_details"><fieldset>
<legend>Room Details</legend>

<table class="nobord"><tr>
    <td>Name:</td>
    <td><input type="text" name="property_room_name[5]" maxlength="120" class="room_name" value="Bedroom Three" required>&nbsp;<a href="#" title="Each room name must be unique (e.g. Bedroom 1 and Bedroom 2 rather than Bedroom and Bedroom)." class="tooltip"><img src="http://www.property-system-uk.com/admin-area/img/tooltip_icon.png" height="14" width="14" alt=""></a></td>
  </tr><tr>
    <td>Dimensions:</td>
    <td><input type="text" name="property_room_length[]" maxlength="7" value="3.62" class="room_length"> length x <input type="text" name="property_room_width[]" maxlength="7" value="1.79" class="room_width"> width&nbsp;<select name="property_room_dimension_unit[]" class="dimension_unit"><option value="">Please Select</option><option value="6">Centimetres</option><option value="8">Feet</option><option value="9">Inches</option><option value="5" selected>Metres</option><option value="7">Millimetres</option></select></td></tr><tr>
    <td>Dimension Description:</td>
    <td><input type="text" name="property_room_dimension_text[]" maxlength="120" value="">&nbsp;<a href="#" title="Describe the room dimensions (e.g. if the room narrows or is an L-shape)." class="tooltip"><img src="http://www.property-system-uk.com/admin-area/img/tooltip_icon.png" height="14" width="14" alt=""></a></td>
  </tr><tr>
    <td>Description:</td>
    <td><textarea name="property_room_description[]" rows="6" cols="40">Window to the front aspect, integrated storage and carpet flooring.</textarea></td></tr><tr>
    <td>Actions:</td>
    <td><input type="button" class="delete_div" value="Delete Room">&nbsp;<input type="button" class="addRoom" value="Add Room"></td>
    </tr></table>

</fieldset></div><div id="room_details_6" class="room_details"><fieldset>
<legend>Room Details</legend>

<table class="nobord"><tr>
    <td>Name:</td>
    <td><input type="text" name="property_room_name[6]" maxlength="120" class="room_name" value="Bathroom" required>&nbsp;<a href="#" title="Each room name must be unique (e.g. Bedroom 1 and Bedroom 2 rather than Bedroom and Bedroom)." class="tooltip"><img src="http://www.property-system-uk.com/admin-area/img/tooltip_icon.png" height="14" width="14" alt=""></a></td>
  </tr><tr>
    <td>Dimensions:</td>
    <td><input type="text" name="property_room_length[]" maxlength="7" value="2.29" class="room_length"> length x <input type="text" name="property_room_width[]" maxlength="7" value="2.65" class="room_width"> width&nbsp;<select name="property_room_dimension_unit[]" class="dimension_unit"><option value="">Please Select</option><option value="6">Centimetres</option><option value="8">Feet</option><option value="9">Inches</option><option value="5" selected>Metres</option><option value="7">Millimetres</option></select></td></tr><tr>
    <td>Dimension Description:</td>
    <td><input type="text" name="property_room_dimension_text[]" maxlength="120" value="">&nbsp;<a href="#" title="Describe the room dimensions (e.g. if the room narrows or is an L-shape)." class="tooltip"><img src="http://www.property-system-uk.com/admin-area/img/tooltip_icon.png" height="14" width="14" alt=""></a></td>
  </tr><tr>
    <td>Description:</td>
    <td><textarea name="property_room_description[]" rows="6" cols="40">Fully tiled walls, bath with mixer taps, thermostatic shower, wash basin, W/C, radiator, frosted window to the rear aspect, extractor fan, vinyl flooring and LED spotlights.</textarea></td></tr><tr>
    <td>Actions:</td>
    <td><input type="button" class="delete_div" value="Delete Room">&nbsp;<input type="button" class="addRoom" value="Add Room"></td>
    </tr></table>

</fieldset></div><div id="room_details_7" class="room_details"><fieldset>
<legend>Room Details</legend>

<table class="nobord"><tr>
    <td>Name:</td>
    <td><input type="text" name="property_room_name[7]" maxlength="120" class="room_name" value="Exterior" required>&nbsp;<a href="#" title="Each room name must be unique (e.g. Bedroom 1 and Bedroom 2 rather than Bedroom and Bedroom)." class="tooltip"><img src="http://www.property-system-uk.com/admin-area/img/tooltip_icon.png" height="14" width="14" alt=""></a></td>
  </tr><tr>
    <td>Dimensions:</td>
    <td><input type="text" name="property_room_length[]" maxlength="7" value="0.00" class="room_length"> length x <input type="text" name="property_room_width[]" maxlength="7" value="0.00" class="room_width"> width&nbsp;<select name="property_room_dimension_unit[]" class="dimension_unit"><option value="">Please Select</option><option value="6">Centimetres</option><option value="8">Feet</option><option value="9">Inches</option><option value="5">Metres</option><option value="7">Millimetres</option></select></td></tr><tr>
    <td>Dimension Description:</td>
    <td><input type="text" name="property_room_dimension_text[]" maxlength="120" value="">&nbsp;<a href="#" title="Describe the room dimensions (e.g. if the room narrows or is an L-shape)." class="tooltip"><img src="http://www.property-system-uk.com/admin-area/img/tooltip_icon.png" height="14" width="14" alt=""></a></td>
  </tr><tr>
    <td>Description:</td>
    <td><textarea name="property_room_description[]" rows="6" cols="40">Gardens to the front and rear.</textarea></td></tr><tr>
    <td>Actions:</td>
    <td><input type="button" class="delete_div" value="Delete Room">&nbsp;<input type="button" class="addRoom" value="Add Room"></td>
    </tr></table>

</fieldset></div><fieldset><legend>Actions</legend><table class="nobord">
  <tr>
  <td><input type="submit" value="Save"></td>
  </tr></table></fieldset></form></div>
<div id="footer">
<table class="nobordeven" style="width:100%;">
  <tr><td><div class="center">Copyright &copy; 2013 to 2017 - Atlas Estate Agents Limited</div></td></tr>
</table></div>
</div>
</body>
</html> 

问题评论:

5  
Check the documentation for .prev() — it does not look at any element other than the immediate preceding sibling. There can only be one of those.
    
You need $(this).closest('table.nobord').find('...
1  
Those aren’t working either…they can’t, there are no matches to that traverse
1  
BECAUSE this is the input inside of a TD. The siblings are the inputs in the TD. The other data in the other TDs are not the siblings…. If it was your family, those inputs are your cousins….
1  
What @Satpal suggested, select the table and find the elements

原文地址:

https://stackoverflow.com/questions/47754943/why-is-jquery-prev-not-working-with-dynamically-generated-inputs

Add a Comment