jQuery on click not triggering on first click..works on second click

I am loading jquery.ime editor which supports the multi language editing, using this library https://github.com/wikimedia/jquery.ime/blob/master/examples/ced/script.js, there behavior is on "change" they are loading corresponding language JSON. I need that work on button click. on button click i am opening modal window, there I have text field, where I have write in regional languages. I know the language code based on that corresponding language is coming there, but right now the issue is I am able write in regional language on second click of button.

Here is my code:

open(writecontent: TemplateRef<any>, countvalue,books) {

this.config.keyboard = false;
this.modalRef = this.modalService.show(writecontent, Object.assign({}, this.config,{ class: 'gray modal-lg' }));

$( document ).ready( function () {
'use strict';

var $ced, ime, $imeSelector, $langSelector;

$.ime.setPath( '../../' );
$ced = $( '#ced' );
// Initialise IME on this element
$ced.ime( {
showSelector: false
} );
// Get the IME object
ime = $ced.data( 'ime' );

ime.enable();
$imeSelector = $( '#imeSelector' );
$langSelector = $( '#go' );
$langSelector.click(function() {

ime.setLanguage(books.language[0].language_id);

});

$ced.on( 'imeLanguageChange', function () {
listInputMethods( ime.getLanguage() );
});

function listInputMethods( lang ) {
$imeSelector.empty();
ime.getInputMethods( lang ).forEach( function ( inputMethod ) {
$imeSelector.append(
$( '<option/>' ).attr( 'value', inputMethod.id ).text( inputMethod.name )
);
});
$imeSelector.trigger( 'change' );
}

$imeSelector.on( 'change', function () {
var inputMethodId = $imeSelector.find( 'option:selected' ).val();
ime.load( inputMethodId ).done( function () {
ime.setIM( inputMethodId );
});
});
});

}


HTML CODE

<button id="go" (click)="open(books)" [ngClass]="{'disabled': disbutton}" [disabled]="disbutton" class="cl_add">ADD CONTENT</button>
<ng-template #writecontent>

<div class="modal-header">
<button type="button" class="close pull-right" aria-label="Close" (click)="modalRef.hide();destroy()">
<span aria-hidden="true">&times;</span>
</button>
<h4 class="modal-title text-center"> write Content</h4>

</div>
<div class="modal-body" role="application">
<form ngNativeValidate (ngSubmit)="onSubmit()" #writeContentForm="ngForm">

<div class='imeSelector' style="display:none">
<select id="imeSelector"></select>
</div>
<div>
<label for="regLang">Title</label>
<input type="text" id="ced" class="txt_book_inf" name="regLang" minlength="10" maxlength="150" required />
</div>

<div>
<label class="new_span_txt">Write Content</label>

<textarea id="mytextareaid" name="mytextareaid" rows="20" cols="80" style="width: 100%; height:200px;"></textarea>
</div>
<div id="message"></div>

<br />
<div class="text-center">
<button type="submit" class="btn-left" class="btn btn-primary">SAVE</button>
</div>
</form>
</div>
</ng-template>


And i am working on Angular project both id and angular click event on the same button is that causing the issue ?

Continue reading...