jQuery从DOM中删除元素后仍然报告当前状态

问题描述

我有一个地址查找器系统，用户可以输入邮政编码，如果邮政编码得到验证，则返回并显示地址列表，然后他们选择一个地址行，该列表消失，然后将地址行进一步拆分为某种形式输入.

I have an address finder system whereby a user enters a postcode, if postcode is validated then an address list is returned and displayed, they then select an address line, the list dissappears and then the address line is split further into some form inputs.

我面临的问题是，当他们完成上述过程之后，清除了邮政编码表单字段，点击了查找地址按钮，然后重新出现了地址列表.

The issue i am facing is when they have been through the above process then cleared the postcode form field, hit the find address button and the address list re-appears.

事件虽然列表和父级tr已从DOM中删除，但仍报告它以长度1存在吗?

Event though the list and parent tr have been removed from the DOM it is still reporting it is present as length 1?

我的代码如下:

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

});

推荐答案

我认为您遇到了我最近遇到的同一问题.如果您有一个指向5个DIV的变量(例如: var divs = $('.mydivs'); )，然后在其中一个DIV上调用jQuery的remove()，如下所示: divs.eq(0).remove()，您会看到 divs.size()仍返回5个项目.这是因为remove()在DOM上运行.但是...如果在调用remove()之后，然后重新设置变量: divs = $('.mydivs'); 并获取大小，您现在将获得正确的数组大小.我添加了显示在下面的示例代码:

I think you're running into the same issue I recently ran into. If you have a variable pointing to 5 DIV's (example: var divs = $('.mydivs');) and then you call jQuery's remove() on one of the DIV's, like so: divs.eq(0).remove() you'll see that divs.size() still returns 5 items. This is because remove() operates on the DOM. However... if after calling remove() you then re-set your variable: divs = $('.mydivs'); and get the size you'll now get the correct size of the array. I've added sample code displaying this below:

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

这篇关于jQuery从DOM中删除元素后仍然报告当前状态的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！