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();
    });
});

Answer 2

我不确定$.addEvent()在这种情况下应该或不应该有效，但我建议您尝试使用$.live()方法。

$.live()的要点是，它将适用于与您的选择器匹配的内容，即使它们在您致电$.live()后很久就已添加到页面中。

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

2 个答案: