conflictuel événement de traitement dans jQuery

Question

J'ai un <div> comme ceci:

<div id="Field1"> 
    <label id="label1">Name</label><br/> 
    <input type="text" data-attr="text" style="..." id="input1"/><br/> 
    <label id="instr1"/> 
    <div class="xfb-row-options1"> 
    <a class="button-delete" src="..." style="...">-</a> 
    </div> 
</div> 

J'ai déjà une fonction jQuery:

$("#fb_contentarea_col1down21 div").live("click", function(){ 
    // some stuff to change the properties of the Field, 
    // like changing the field name, size. 
    return false; 
}); 

J'ai un <div> avec un bouton d'image « supprimer » à l'intérieur , et je veux supprimer cela en cliquant sur "button-delete1". Je l'ai essayé avec:

$("#fb_contentarea_col1down21 div div .button-delete1").live("click", function(){ 
    //deleting the Div Field1 
    return false; 
}); 

Maintenant mes deux fonctions sont en conflit. Quand je clique sur "button-delete1", ma fonction # 1 est exécutée et me montre une erreur.

Answer 1

Utilisez la méthode remove pour supprimer la div et stopPropagation de provoquer l'événement, cliquez sur le bouton Supprimer de tirer l'événement, cliquez sur le div parent:

$("#fb_contentarea_col1down21 div div .button-delete1").live("click", function(e){ 
     e.stopPropagation(); 
     $("#Field1").remove(); 
     return false; 
    });