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(event) onclick。该部分工作正常，事件正确触发，我可以从图像元素中读取我的自定义属性。这是单击其中一张图片时调用的函数：

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 在 Firebug 中显示为“emtpy”。无论出于何种原因，我都无法在 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/

注意：我必须将 INPUT 元素上的 id 属性替换为 class 属性，因为 ID 在页面上必须是唯一的，并且您有多个 INPUT。