jQuery DOM object referenced children

爲了創建更乾淨的代碼，我試圖編寫事件處理函數，它們知道它們從何處被調用。我不確定我想要做的事情是不是正確的做事方式，或者如果頁面組成的表格中的div嵌套在底層導致問題。jQuery DOM object referenced children

下表/ 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正確解析表中包含被點擊圖像，螢火蟲是顯示foo_input是在Firebug中顯示「emtpy」。無論出於何種原因，我無法創建指向form_wrapper中的子項的變量。理想情況下，這是我想寫的代碼...但不起作用。

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

來源

2011-03-18 DirtyBirdNJ

從代碼我可以看到你嵌套表內的表。一般來說，我認爲你應該只使用表來呈現數據表。標籤可以讓搜索引擎從網頁中提取標題，段落和定義。將表用於任何其他目的是誤導性的。 – jsonnull 2011-03-18 18:32:21

永遠不要說永遠，但永遠不會巢表！ – 2011-03-18 18:44:47

代碼的結構不是我的設計或決定......我只是試圖在實現一些新功能時改變它的最小可能性。我實際上已經考慮重寫大部分結構作爲我的問題的解決方案，但我擔心會花費不必要的時間... – DirtyBirdNJ 2011-03-18 18:56:09

在這裏你去：

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

現場演示：http://jsfiddle.net/simevidas/HMJcy/

注：我不得不更換上的INPUT元素的類屬性id屬性，因爲ID的要在頁面上是唯一的，並且您有多個INPUT。

來源

2011-03-18 18:42:54

您認爲我的問題的根源可能是使用多個ID嗎？ – DirtyBirdNJ 2011-03-18 19:00:09

嗨，Šime打敗了我。「children（）」只能找到IMMEDIATE（第一級）元素，對於TABLE來說這將是TBODY元素等。如答案所述，將「children」改爲「find」。問候 – Neil 2011-03-18 19:04:31

@Dirty您可以使用多個ID。您可以在頁面上擁有儘可能多的ID。但是，所有ID都必須是唯一的。您不能擁有兩個具有相同值的ID屬性。由於您的頁面上有多個INPUT元素，因此請爲他們提供一個類而不是ID。 – 2011-03-18 19:14:50

jQuery DOM object referenced children

回答

相關問題