添加新屬性到表單元素的jquery問題

嗯，我試着儘可能多的閱讀，但似乎無法找到我需要的細節。我是jquery的新手，但到目前爲止，它已經解決了我以前的所有問題，我非常喜歡它。添加新屬性到表單元素的jquery問題

這是我的問題。我試圖創建一個動態表單，用戶在按下按鈕時會自動克隆包含標籤的div對象。一切工作正常，除了刪除。我想在一個span標籤中放置一個刪除圖像，這樣當用戶點擊圖標時，它將刪除相應的div及其子元素。克隆等工作正常，刪除也是如此（當我刪除最後一個元素時），但是我需要從傳遞div的id並且刪除那個div的「onclick」事件中執行刪除。 ..這將允許用戶刪除位於其他元素中間的div元素等。我不知道如何動態添加onclick事件。

這裏是jQuery代碼：

<script> 
$('#btnAdd_expenses').click(function() { 
var num  = $('.clonedInput_expenses').length;     
var newNum = new Number(num + 1);      
var newElem = $('#expenses_input' + num).clone().attr('id', 'expenses_input' + newNum); 
newElem.children(':nth-child(1)').attr('id', 'expenses_label_id' + newNum).attr('name', 'expenses_label' + newNum); 

newElem.children(':nth-child(2)').attr('id', 'expenses_value_id' + newNum).attr('name', 'expenses_value\' + newNum); 


HERE'S THE PLACE WHERE I'M STRUGGLING: AT THIS SPOT i HAVE INSERTED THE FOLLOWING CODE WHICH DUPLICATES THE SPAN TAG THAT CONTAINS THE DELETE FUNCTIONALITY, EXCEPT I CAN'T GET THE ONCLICK EVENT TO BE POPULATED...IT'S JUST COPYING THE ONCLICK EVENT FROM THE ELEMENT IN THE MARKUP IT IS CLONING...I WANT IT TO OVERWRITE IT WITH THE FOLLOWING: 

newElem.children(':nth-child(3)').attr('id', ' . $id . '_btnDel_expenses' +newNum).addEvent(\'click\', function(){ remove_this(' . $id . 'expenses_input' + num)}); 

$('#expenses_input' + num).after(newElem); 
</script>

繼承人的HTML標記：

<div id="expenses_input1" style="margin-bottom:4px;" class="clonedInput_expenses"> 

<input type="text" name="expenses_label1" id="expenses_label_id1" value="Property Taxes" />&nbsp; 

<input type="text" name="expenses_value1" id="expenses_value_id1" value = "$10,000.00" />&nbsp; 

<span title="Remove" id="btnDel_expenses" class="a_hand" onclick="javascript:remove_this(\'' . $id . '_expenses_input1\');"><img src="../images/delete.png" /></span> 

</div>

我使用PHP生成的代碼作爲一個字符串，因此$ ID被串聯起來的。但重點是我使用id來保持每個element_id的唯一性。

任何想法如何在克隆對象期間添加onclick事件？

謝謝。

來源

2010-02-01 Ronedog

您可以使用live。

<div id="expenses_input1" style="margin-bottom:4px;" class="clonedInput_expenses"> 

<input type="text" name="expenses_label1" id="expenses_label_id1" value="Property Taxes" />&nbsp; 

<input type="text" name="expenses_value1" id="expenses_value_id1" value = "$10,000.00" />&nbsp; 

<span title="Remove" id="btnDel_expenses" class="del_or_something a_hand" onclick="javascript:remove_this(\'' . $id . '_expenses_input1\');"><img src="../images/delete.png" /></span> 

</div>

然後

$(document).ready(function() { 
    $('.del_or_something').live('click', function() { 
     $(this).parent().remove(); 
    }); 
});

來源

2010-02-01 18:14:26 harpax

live（）完美工作。謝謝你的提示！ – Ronedog 2010-02-01 23:52:20

@Ronedog：如果您覺得這個答案有幫助，請接受。您可以通過單擊答案左側的複選標記來完成此操作。 – Sampson 2010-02-02 17:48:01

我不知道，如果$.addEvent()應該或不應該在這種情況下工作，但我會建議嘗試$.live()方法來代替。

$.live()的要點在於它適用於與您的選擇器相匹配的事物，即使它們在您撥打$.live()後很長時間才添加到頁面中。

來源

2010-02-01 18:16:39

live（）完美工作。謝謝你的提示！ – Ronedog 2010-02-01 23:52:40

添加新屬性到表單元素的jquery問題

回答

相關問題