JQuery addClass不适用于ajaxForm

时间:2016-08-29 12:26:35

标签: javascript html

我的表单是使用ajaxForm提交的,我想在ajax响应中添加CSS类。我尝试了很多东西,但没有工作。这是代码

jQuery('#pnpDocLink-modalForm').ajaxForm({
    dataType : 'json',
    iframe : true,
    context: this,
    success : function(response, status, xhr, form) {
        var element = $(this);
        if(status=='success')
            $(this).find('form#pnpDocLink-modalForm input[name="file"]').parents('div.form-group').addClass('has-error');
    }
});


<form id="pnpDocLink-modalForm" class="form-horizontal" name="pnpDocLink-modalForm" method="post" enctype="multipart/form-data">
    <div class="form-group">
        <label class="control-label col-md-3">
            $brander.getBrandElement("predict.manage.asset.addedit.file")<span class="required" aria-required="true"> * </span>
        </label>
        <div class="col-md-9">
            <div class="fileupload fileupload-new custom-field pull-left" data-provides="fileupload">
                 <span class="btn btn-default btn-file">
                     <span class="fileupload-new"><i class="icon-paper-clip"></i> $brander.getBrandElement('browse')</span>
                     <span class="fileupload-exists"><i class="icon-undo"></i> Change</span>
                     <input type="file" class="default apply-ext-filter" name="file" id="file" />
                 </span>
                 <span class="fileupload-preview" style="margin-left:5px;"></span>
                 <a href="#" class="close fileupload-exists" data-dismiss="fileupload" style="float: none; margin-left:5px;"></a>
             </div>
         </div>
     </div>
</form>

1 个答案:

答案 0 :(得分:0)

this指向success处理程序中的另一个对象\上下文,因此将其更改为以下内容:

var self = this;
jQuery('#pnpDocLink-modalForm').ajaxForm({
    dataType : 'json',
    iframe : true,
    context: self,
    success : function(response, status, xhr, form) {
        var element = $(self);
        if(status=='success')
        {
            element.find('form#pnpDocLink-modalForm input[name="file"]').parents('div.form-group').addClass('has-error');
        }
    }
});