Problème Jquery ajoutant un nouvel attribut à l'élément de formulaire

Question

Eh bien, j'ai essayé de lire autant que je le pouvais mais je n'arrive pas à trouver les détails pour ce dont j'ai besoin. Je suis nouveau à jquery, mais jusqu'ici il a résolu tous mes problèmes précédents et je l'aime vraiment.

Voici mon problème. J'essaie de créer un formulaire dynamique où l'utilisateur appuie sur un bouton et il clone automatiquement l'objet div qui contient des balises. Tout fonctionne bien, sauf la suppression. Je souhaite placer une image de suppression à l'intérieur d'une balise span afin que lorsque l'utilisateur clique sur l'icône, elle supprime la div appropriée et ses éléments enfants. Le clonage, etc. fonctionne bien, de même que la suppression (quand je supprime juste le dernier élément), mais j'ai besoin que la suppression soit exécutée à partir de l'événement "onclick" qui passe l'identifiant du div et supprime ce div. .. cela permettra à un utilisateur de supprimer un élément div qui est au milieu d'autres éléments, etc. Je ne sais pas comment ajouter un événement onclick dynamiquement.

Voici le 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 le balisage 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> 

Je produis ce code comme une chaîne en utilisant php, d'où l'$ id étant concaténé avec le. mais le point est que j'utilise id pour garder chaque element_id unique.

Des idées comment ajouter l'événement onclick lors du clonage des objets?

Merci.

Answer 1

Vous pouvez utiliser 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> 

puis

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

Answer 2

Je ne suis pas sûr si le $.addEvent() devrait ou ne devrait pas fonctionner dans ce cas, mais je suggère d'essayer la méthode $.live() à la place.

Le point $.live() est qu'il s'appliquera aux éléments qui correspondent à votre sélecteur, même s'ils sont ajoutés à la page longtemps après avoir appelé $.live().