Jquery problem adding new attribute to form element

Well, I tried reading as much as I could but can't seem to find the specifics for what i need. I'm new to jquery, but so far it has solved all my previous problems and I'm really liking it.

Here's my problem. I'm trying to create a dynamic form where the user presses a button and it automatically clones the div object that contains tags. Everything works fine, except the delete. I want to place a delete image inside a span tag so when the user clicks the icon it will remove the appropriate div and its child elements. The cloning, etc. is working fine, and so does the delete (when I just remove the last element), but I need the delete to be executed from the "onclick" event which passes the id of the div and deletes that div...this will allow a user to remove a div element that is in the middle of other elements, etc. I don't know how to add an onclick event dynamically.

Here is the jquery code:

<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 SPO开发者_如何转开发T 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>

Heres the HTML markup:

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

I generate this code as a string using php, hence the $id being concatenated with the . but the point is I'm using id's to keep each element_id unique.

Any ideas how to add the onclick event during the cloning of the objects?

Thanks.

---

You could use 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>

and then

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

---

I'm not sure if the $.addEvent() should or shouldn't work in this case, but I would suggest trying the $.live() method instead.

The point of $.live() is that it will apply to things that match your selector, even if they're added to the page long after you call $.live().