jQuery .closest returns undefined
- by Andy Holmes
I've got the code below which works fine, however the jquery to add the items doesnt find the data-parent-room value and just returns undefined. This is the only thing not working :(
HTML:
<div id="inventoryRooms">
<!--BOX SHART-->
<div class="widget box formHolder" data-parent-room="1">
<!--ROOM NAME-->
<form class="widget-header rooms">
<input type="text" placeholder="Type Room name" name="roomName[]" class="form-input add-room-input input-width-xxlarge">
<input type="hidden" class="roomId" name="roomId[]">
<input type="hidden" class="inventoryId" name="inventoryId[]" value="<?=$_GET['inventory_id']?>">
<div class="toolbar no-padding">
<div class="btn-group">
<span class="btn saveRoom"><i class="icon-ok"></i> Save Room</span>
</div>
</div>
</form>
<!--/END-->
<!--GENERIC ROW TITLES-->
<div class="widget-header header-margin hide">
<div class="row row-title">
<div class="col-md-3"><h5>ITEM</h5></div>
<div class="col-md-3"><h5>DESCRIPTION</h5></div>
<div class="col-md-3"><h5>CONDITION</h5></div>
<div class="col-md-2"><h5>PHOTOGRAPH</h5></div>
<div class="col-md-1 align-center"><h5><i class="icon-cog"> </i></h5></div>
</div>
</div>
<!--/END-->
<!--ADD ITEM-->
<div class="items">
</div>
<!--/END-->
<div class="toolbar-small">
<div class="btn-group">
<span class="btn addItem"><i class="icon-plus"></i> Add Item</span>
<span data-toggle="dropdown" class="btn dropdown-toggle"><i class="icon-gear"></i> Options<span class="button-space"></span><i class="icon-angle-down"></i></span>
<ul class="dropdown-menu pull-right">
<li><a href="#"><i class="icon-trash"></i> Delete Room</a></li>
</ul>
</div>
</div>
</div>
</div>
jQuery:
$(document).on('click','.addItem', function(){
$('<!--ROW START-->\
<form class="widget-content item">\
<div class="row">\
<div class="col-md-3"><input type="text" class="form-control" name="itemName[]"></div>\
<div class="col-md-3"><textarea class="auto form-control" name="itemDescription[]" cols="20" rows="1" style="word-wrap: break-word; resize: vertical;"></textarea></div>\
<div class="col-md-3"><textarea class="auto form-control" name="itemCondition[]" cols="20" rows="1" style="word-wrap: break-word; resize: vertical;"></textarea></div>\
<input type="hidden" class="itemId" name="itemId[]" value="">\
<input type="hidden" name="itemInventoryId[]" value="<?=$_GET["inventory_id"]?>">\
<input type="hidden" name="itemParent[]" value="'+$(this).closest().attr('data-parent-room')+'">\
<div class="col-md-2">\
<div class="fileinput-holder input-group">\
<input id="fileupload" type="file" name="files[]" data-url="uploads/">\
</div>\
</div>\
<div class="col-md-1 align-center"><i class="save icon-ok large"> </i> <i class="delete icon-trash large"> </i></div>\
</div>\
</form>\
<!--/ROW END-->').fadeIn(500).appendTo($(this).parents().siblings('.items'));
$(this).parent().parent().siblings('.widget-header, .header-margin, .hide').removeClass('hide').fadeIn();
});
Like i say, it all works fine apart from that damn data-parent-room value. Any help is appreciated! using jQuery 1.10.1
