To improve the quality of my code, I am attempting to write event handler functions that are able to identify their source. It's unclear whether my approach is incorrect or if the nesting of divs within tables on the page is causing issues.
The objective of the table/js below is to extract data from the attributes of the image tag and populate it into the input elements within the parent or ancestor table.
Table Structure:
<table id="formbody">
<tr><td>
<table class="form_item_wrapper" id="form_item_1">
<tr><td><div id="search_results"><img class="event_handler" foo="bar" /></div></td></tr>
<tr><td>Foo: <input id="event_input" name="foo_input_1"></td></tr>
</table>
<table class="form_item_wrapper" id="form_item_1">
<tr><td>
<div id="search_results"><img class="event_handler" foo="baz" /></div>
</td></tr>
<tr><td>Foo: <input id="event_input" name="foo_input2"></td></tr>
</table>
</td></tr>
</table>
Each .form_item_wrapper table has a dynamic section where a list of .event_handler images can be populated. Once the $.get() function retrieves the entries and populates the data, it links the handlers to the images to trigger the onclick event for populate_shipment_details(event). This part functions correctly, with events triggering as expected and custom attributes from the image elements being readable. The following is the function called when one of the images is clicked:
function populate_shipment_details(event){
var form_wrapper = $(event.target).closest('.form_item_wrapper');
var foo_input = $(form_wrapper).children('#event_input');
foo_input.val($(event.target).attr('foo'));
}
The issue I am facing is that although form_wrapper correctly identifies the table containing the clicked image, Firebug indicates that foo_input appears "empty". For some reason, I am unable to create variables that target children within the form_wrapper. Ideally, I would like to write this code... which unfortunately does not work.
$(form_wrapper).children("#event_input").val($(event.target).attr('foo'));