添加新属性到表单元素的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问题

回答

相关问题