Jquery向表单元素添加新属性的问题

Question

嗯，我尝试尽可能多地阅读，但似乎找不到我需要的具体内容。我是 jquery 的新手，但到目前为止它已经解决了我之前的所有问题，而且我真的很喜欢它。

这是我的问题。我正在尝试创建一个动态表单，用户按下按钮，它会自动克隆包含标签的 div 对象。除了删除之外，一切正常。我想在 span 标签内放置一个删除图像，这样当用户单击该图标时，它将删除相应的 div 及其子元素。克隆等工作正常，删除也是如此(当我刚刚删除最后一个元素时)，但我需要从“onclick”事件执行删除，该事件传递 div 的 id 并删除该 div。 ..这将允许用户删除位于其他元素中间的 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 事件吗？

谢谢。

Answer 1

您可以使用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();
    });
});