麻烦jquery .append

Question

我有这个HTML：

<div class="expand">
<div class="title" id="SectionTitle2">Academics</div>
<input type="button" onclick="showTitleForm('2');" name="editTitle2" value="Edit Title">
<form id="titleForm2" method="POST" onsubmit="processTitle('titleForm2')" >
    <div id="SectionTitle2-group" class="form-group">
        <input type="text" name="SectionTitle" />
    </div>
    <div id="SectionID2-group" class="form-group">
        <input type="hidden" name="SectionID" value="2" />
    </div>
    <input type="submit" value="Save" />
</form>

这是我的JavaScript：

function processTitle(formID) {

    $('.form-group').removeClass('has-error');

    var formData = {
        'SectionTitle'  : $('input[name=SectionTitle]').val(),
        'SectionID'         : $('input[name=SectionID]').val()
    };

    var id = formData['SectionID'];
    var eg = formID;


    // process the form 
    $.ajax({
        type                        : 'POST',
        url                         : 'editTitle.php',
        data                        : formData,
        dataType                : 'json',
        encode                  : true
    }).done(function(data) { // using the done promise callback
        // log data to the console
        console.log(data);

        // handle errors and validation messages
        if (data.success === false) {
            $('SectionTitle'+id+'-group').addClass('has-error'); // use CSS to make red input
            $(eg).append('<div class="help-block">' 
                                                + data.errors.SectionTitle 
                                                + '</div>'
                                                );
            $('SectionID'+id+'-group').addClass('has-error');
            $(eg).append('<div class="error-block">'
                                                + data.errors.SectionID
                                                + '</div>'
                                                );
        } else { 
            $(eg).append('<div class="alert alert-success">Success!</div>');
            document.getElementById('SectionTitle'+id).innerHTML = formData['SectionTitle'];
            hideAllForms();
        }       
    });

    event.preventDefault();
    return false;

}

当我点击“保存”时，标题会更改，PHP运行正常，控制台中没有错误，但在表单末尾没有额外的div。有线索吗？

谢谢。

Answer 1

您需要将井号添加到选择器中。

 var eg = '#' + formID;

Answer 2

var eg = formID;

在这里，您将formID作为参数传递给函数processTitle。

在$(eg)中，您忘记在前面追加#。

应为$("#"+eg)

否则必须是：

var eg = "#"+formID;

Answer 3

当您调用eg函数时，titleForm2变量设置为processTitle()，这将导致

$('titleForm2').append('<div class="alert alert-success">Success!</div>');

稍后在您的代码中。你必须把它改成

  var eg = '#' + formID;

以获得

$('#titleForm2').append(...);

最终会将新div添加到id #titleForm2

的表单中

Answer 4

我建议您将表单元素本身作为this传递。

<form id="titleForm2" method="POST" onsubmit="processTitle(this)" >

然后在JS

function processTitle(form){
   var $form = $(form);// more understandable variable name than `eg`
     ....
     $form.find('.form-group').removeClass('has-error');
     ....

    /* processing code then */
    $form.append(".....");

}