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

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.

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

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.

这是我的问题。我正在尝试创建一个动态表单，用户按下按钮，它会自动克隆包含标签的div对象。一切正常，除了删除。我想在span标记内放置一个删除图像，因此当用户单击该图标时，它将删除相应的div及其子元素。克隆等工作正常，删除（当我只删除最后一个元素时），但我需要从“onclick”事件执行删除，该事件传递div的id并删除该div。 ..这将允许用户删除位于其他元素中间的div元素等。我不知道如何动态添加onclick事件。

Here is the jquery code:

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

Heres the HTML markup:

继承人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>

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.

我使用php生成此代码作为字符串，因此$ id与...连接。但关键是我正在使用id来保持每个element_id的唯一性。

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

有什么想法如何在克隆对象期间添加onclick事件？

Thanks.

谢谢。

2 个解决方案

#1

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

#2

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

我不确定$ .addEvent（）在这种情况下应该或不应该工作，但我建议尝试使用$ .live（）方法。

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().

$ .live（）的要点是，它将适用于与您的选择器匹配的内容，即使它们在您调用$ .live（）之后很久就被添加到页面中。

#1