Question

在尝试创建更清晰的代码时，我正在尝试编写事件处理函数，这些函数知道它们从何处被调用。我不确定我正在尝试做的事情是不是正确的做事方式，或者如果页面组成的表格中的div的基础嵌套导致问题。

下表/ js的目标是从image标签的属性中获取数据，并将它们填充到parent / ancestor表中的输入元素中。

表格结构：

<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（事件）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元素上的class属性替换id属性，因为ID必须在页面上是唯一的，并且你有多个INPUT。

jQuery DOM对象引用了子对象

1 个答案: