以编程方式调用点击事件并不会执行真正点击事件

Question

我正在使用Angular来开发客户端 - 服务器应用程序，但这不是一个Angular问题，或者可能是。

在一个页面上，我有一个按钮，可以打开一个带有2个按钮的模态。一个用于提交，另一个用于结束。如果实际点击它们，它们都可以工作。

问题在于我希望“提交”按钮关闭模式，即执行关闭按钮的操作。

我打开这样的模态：

@ViewChild(AddAfmStatementIdentifiersComponent) createAfmStatementIdentifiers: any = {};
    CreateAfmStatementIdentifiers() {

        this.createAfmStatementIdentifiers.afmStatementIdentifiers = this.afmStatementIdentifiers;
        this.createAfmStatementIdentifiers.open();

    }

2个按钮是：

<div id="responsive-modal" class="modal fade" tabindex="-1"  role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="display: none;">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">x</button>
                <h4 class="modal-title">Modifica avizul</h4>
            </div>
            <div class="modal-body">
                <div class="col-12">
                    <form novalidate class="form-horizontal p-t-20">

                        <div class="row">
                            <div class="col-lg-12 col-md-12 col-sm-12">
                                <div class="form-group has-success">
                                    <h4 class="entity-info"><label for="denumire" class="label-has-danger"> Serie </label></h4>
                                    <div class="input-group">
                                        <div class="input-group-addon"><img src="/images/Deseuri/serieDocument.svg" alt="document series" class="img-responsive" /></div>
                                        <input type="text" id="serie" name="serie" class="form-control" [(ngModel)]="afmStatementIdentifiers.barcodeIdentifier" data-validation-required-message="campul nu poate fi gol!">
                                    </div>
                                </div>
                                <div class="alert alert-danger" role="alert" *ngIf="barcodeIdentifierErrors.length > 0">
                                    <ul>
                                        <li *ngFor="let error of barcodeIdentifierErrors">
                                            {{ error }}
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-lg-12 col-md-12 col-sm-12">
                                <div class="form-group has-success">
                                    <h4 class="entity-info"><label for="denumire" class="label-has-danger"> Numar inceput </label></h4>
                                    <div class="input-group">
                                        <div class="input-group-addon"><img src="/images/Deseuri/numarDocument.svg" alt="document start number" class="img-responsive" /></div>
                                        <input type="text" id="startNumber" name="startNumber" class="form-control" [(ngModel)]="afmStatementIdentifiers.version" data-validation-required-message="campul nu poate fi gol!">
                                    </div>
                                </div>
                                <div class="alert alert-danger" role="alert" *ngIf="versionErrors.length > 0">
                                    <ul>
                                        <li *ngFor="let error of versionErrors">
                                            {{ error }}
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>

                    </form>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-md btn-red animated flipInX flipInY lightSpeedIn slideInUp" data-dismiss="modal" id="closeButton">
                    <i class="fa fa-window-close"></i> Close
                </button>
                <button type="button" class="btn btn-md btn-add animated flipInX flipInY lightSpeedIn slideInUp" (click)="submit()">
                    <i class="fa fa-floppy-o"></i> Save
                </button>
            </div>
        </div>
    </div>
</div>

在父母的

我在孩子中调用这个方法：

cancel() {
    $('#closeButton').click()
    this.isOpen = false;
}

一切正常，但这两个div：

<div class="modal-backdrop fade in"></div>
<div class="sweet-overlay" tabindex="-1" style="opacity: -0.04; display: none;"></div>

保留在html中，它们使所有界面都不可点击

用户需要刷新页面才能点击任何其他按钮。

但实际上点击＆＃34;关闭＆＃34;按钮删除那些div。

单击提交按钮时，如何正确处理模态？