为什么appendTo只工作一次?

时间:2015-06-18 11:45:28

标签: javascript jquery

我正在写一些验证码。

下面代码中引用的对象结构大致如下

invalidFields = { 'fieldOne' : true, 'fieldTwo' : true }
messages = { 'fieldOne' : 'Message' , 'fieldTwo' : 'MessageTwo' }

invalidFields是一个对象,其中包含各种name='fieldName'标记的input个名称。以下代码应添加错误errorList

var errorList = jQuery("<ul class='errorList'></ul>");
var sb = jQuery('div#statusBar');

var templateErrorLi = jQuery('<li></li>' );
var invalidFieldsLength = // some logic which I forget (editing my question from a bus)


if (invalidFieldsLength > 0) {
    sb.show()
    errorList.appendTo(sb);
}

else {
    sb.hide()
    sb.detach()
}

for (var key in invalidFields) {

    if (invalidFields.hasOwnProperty(key)) {
        var invalid = form.find('[name="' + key + '"]');
        invalid.addClass('error');
        templateErrorLi.clone().text(messages[key]).appendTo(errorList);
    }
}

此引用的HTML只是一个空的DIV。

<div id='statusBar'></div>

出于某种原因,这只能工作一次但只能工作一次。 invalidFields对象中的第二项不会追加,即使for循环肯定迭代了它。如果有人能告诉我为什么这不起作用,那将非常感激:)谢谢!

1 个答案:

答案 0 :(得分:0)

经过一番搜索,我意识到问题所在;

 var errorList = jQuery("<ul class='errorList'></ul>");

上面的代码在函数的上下文中运行,这意味着它每次都是全新创建的。虽然仍然存在一些需要解决的问题,但以下问题解决了我原来的问题:

if ( jQuery('#statusBar .errorList').length == 0 ) {
    errorList = jQuery("<ul class='errorList'></ul>");
}

else {
    errorList = jQuery('#statusBar .errorList');
}