Объект JQuery DOM ссылается на детей

Question

В попытке создать более чистый код я пытаюсь написать функции-обработчики событий, которые знают, откуда они вызываются.Я не уверен, что то, что я пытаюсь сделать, не является правильным способом выполнения действий, или если внутреннее вложение элементов div в таблицы, из которых состоит страница, вызывает проблемы.

Цельприведенная ниже таблица / js должна взять данные из атрибутов тега изображения и заполнить их входными элементами в таблице родителя / предка.

Структура таблицы:

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

Каждыйиз таблиц .form_item_wrapper есть раздел, который может динамически заполнять список .event_handler изображений.Как только $ .get (), извлекающий записи, заполняет данные, он присоединяет обработчики к изображениям для запуска populate_shipment_details (событие) по щелчку.Эта часть работает нормально, события запускаются правильно, и я могу читать свои пользовательские атрибуты из элементов изображения.Это функция, которая вызывается при нажатии на одно из изображений:

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'));

}

Проблема, с которой я сталкиваюсь, заключается в том, что хотя form_wrapper правильно разрешает таблицу, содержащую изображение, по которому щелкнули, Firebug показываетfoo_input показывает "emtpy" в Firebug.По какой-то причине я не могу создать переменные, которые указывают на потомков внутри form_wrapper.В идеале это код, который я хочу написать ... но он не работает.

$(form_wrapper).children("#event_input").val($(event.target).attr('foo'));

Answer 1

Вот, пожалуйста:

$('img.event_handler').click(function() {
    $(this).closest('tr').next().find('input.event_input').val($(this).attr('foo'));
});

Живая демоверсия: http://jsfiddle.net/simevidas/HMJcy/

Примечание. Мне пришлось заменить атрибут id атрибутом class в элементах INPUT, поскольку идентификаторы должны быть уникальными на странице, и у вас есть несколько входов.