2010-04-01 1 views
3

J'ai un système de recherche d'adresses par lequel un utilisateur entre un code postal, si postal est validé alors une liste d'adresses est retournée et affichée, ils choisissent alors une ligne d'adresse, la liste dissappears et La ligne d'adresse est ensuite divisée en plusieurs entrées de formulaire.jQuery suppression d'éléments de DOM mettre encore des rapports que présente

La question que je suis confronté est quand ils ont été à travers le processus ci-dessus puis effacé le champ de formulaire de code postal, cliquez sur le bouton d'adresse et trouver la liste d'adresses réapparaît.

événement si la liste et tr parents ont été retirés du DOM, il est encore des rapports, il est présent en tant que longueur 1?

Mon code est le suivant:

jQuery

// when postcode validated display box 
var $addressList = $("div#selectAddress > ul").length; 

// if address list present show the address list 
if ($addressList != 0) { 
    $("div#selectAddress").closest("tr").removeClass("hide"); 
} 
// address list hidden by default 
// if coming back to modify details then display address inputs 
var $customerAddress = $("form#detailsForm input[name*='customerAddress']"); 

var $addressInputs = $.cookies.get('cpqbAddressInputs'); 

if ($addressInputs) { 
    if ($addressInputs == 'visible') { 
     $($customerAddress).closest("tr").removeClass("hide"); 
    } 
} else { 
    $($customerAddress).closest("tr").addClass("hide"); 
} 
// Need to change form action URL to call post code web service 
$("input.findAddress").live('click', function(){ 

    var $postCode = encodeURI($("input#customerPostcode").val()); 

    if ($postCode != "") { 
     var $formAction = "customerAction.do?searchAddress=searchAddress&custpc=" + $postCode; 
     $("form#detailsForm").attr("action", $formAction); 
     } else { 
      alert($addressList);} 

}); 
// darker highlight when li is clicked 
    // split address string into corresponding inputs 
    $("div#selectAddress ul li").live('click', function(){ 

    $(this).removeClass("addressHover"); 

    //$("li.addressClick").removeClass("addressClick"); 

    $(this).addClass("addressClick"); 

    var $splitAddress = $(this).text().split(","); 

    $($customerAddress).each(function(){ 
     var $inputCount = $(this).index("form#detailsForm input[name*='customerAddress']"); 
     $(this).val($splitAddress[$inputCount]); 
    }); 

    $($customerAddress).closest("tr").removeClass("hide");  

    $.cookies.set('cpqbAddressInputs', 'visible'); 

    $(this).closest("tr").fadeOut(250, function() { $(this).remove(); }); 

}); 

Répondre

7

Je pense que vous êtes en cours d'exécution dans le même problème que je récemment rencontré. Si vous avez un pointage variable de 5 DIV (l'exemple: « . Mydivs' var divs = $();) puis vous appelez supprimer jQuery() sur l'un des DIV, comme ceci: divs.eq (0) .remove() vous verrez que divs.size() renvoie encore 5 éléments. C'est parce que remove() fonctionne sur le DOM. Cependant ... si après avoir appelé remove(), vous réglez à nouveau votre variable: divs = $ ('. Mydivs'); et obtenir la taille que vous aurez maintenant la bonne taille de la matrice. J'ai ajouté exemple de code affichant ce ci-dessous:

// get all 5 divs 
var d = $('.dv'); 

// remove the first div 
d.eq(0).remove(); 

// you would expect 4 but no, it's 5 
alert(d.size()); 

// re-set the variable 
d = $('.dv'); 

// now we get 4 
alert(d.size());