javascript - 我的行没有变成按钮，而是消失了

Question

我有下一个问题：只要输入字段被检查并正确填写，它们应该变成绿色按钮，但是每当检查发生并且它们应该变成绿色按钮时，它们就会消失。我console.log()是绿色按钮，它返回“未定义”给我。查看图片，然后是前 3 个输入字段：

现在看看检查后的第二个：

如您所见，它们消失了。我确实检查了元素，但找不到它们。

我的代码如何：

$.map(exercise.syllables, function (syllable, j) { 
        if (!syllable || !syllable.trim().length) {
       // If it doesn't exist or is an empty string, return early without creating/appending elements
           return;
      }

        var innerSylCol = $('<div/>', {
            class: 'col-md-3 inputSyllables'
        });

        var sylInput = $('<input/>', {
            'type': 'text',
            'class': 'form-control syl-input',
            'name':  +c++,
            'id': +idsyll++
        }).on('blur', function() {
            var cValue = $(this).val();

            if(cValue === "") {
               return;
            }

            if (cValue === syllable) {
                correctSylls.push(cValue);
                console.log(correctSylls);
            }

            if (exercise.syllables.length === correctSylls.length) {
                $(this).closest('.syll-row').find('input.syl-input').replaceWith(getCorrectBtn(cValue));
              //  console.log(getCorrectBtn(cValue));
                S.addRight();
                S.playRight();
          } else if (cValue !== syllable){
                $(this).css({'color':'#e00413'});
                S.playWrong();
                S.addWrong();
             }
          });

我创建按钮的功能：

function getCorrectBtn(value) {
var correctBtn = $('<button/>', {
    'class': 'btn btn-success buttonCorrect',
    'type': 'button',
    'id': "button" + CBC++,
    'value': value
});
}

以及可能与我的输入字段相关的所有 CSS：

input[type="text"] {
font-size: 150%;
margin-top: 1vh;
transition: color 1s;
}

.btn {
margin: 0;
display: inline-block;
height: 38px;
margin: 5px;
outline: none !important;
}


input {
width:100%;
padding:5px;
outline: none !important;
text-align: center;
}

标签： javascriptjquery