OKCallback /ブートストラップダイアログでイベントが発生しません

Question

ダイアログを作成してコードを保存しようとしていますので、コンテンツを渡すだけでコードが残りの部分を処理します。私はかなりのダイアログが必要な場所にビルドしているので、これを論理的に考えてみてください。私が抱えている問題は、ダイアログのボタンでOKを押すと、コールバック関数を起動する必要があるということです。私は、クリック事象、ひいてはコールバックがまったく発砲していないのでどこかにいると思う。

https://jsfiddle.net/qcvjndh6/

コード：根本的な原因が何であったか

function Utils() { 

} 

Utils.prototype = { 
    constructor: Utils, 
    showDialog: function (title, html, okCallback) { 
     var modal = $('<div />', { 'class': 'modal fade', 'role': 'dialog', id: 'mymodal' }); 
     var modalDlg = $('<div />', { 'class': 'modal-dialog' }); 
     var modalContent = $('<div />', { 'class': 'modal-content' }); 

     modalContent.append($('<div />', { 'class': 'modal-header', 'text': title }) 
         .append($('<button />', { 'type': 'button', 'class': 'close', 'data-dismiss': 'modal', 'aria-label': 'Close' }) 
          .append($('<span />', { 'aria-hidden': 'true' }).html('&times;')))); 
     modalContent.append($('<div />', { 'class': 'modal-body' }) 
         .append(html)); 
     modalContent.append($('<div />', { 'class': 'modal-footer' }) 
         .append($('<button />', { 'class': 'btn btn-primary', 'data-dismiss': 'modal', 'type': 'button', 'text': 'OK', id: 'btnOKCLOSE' }))); 
     modal.append(modalDlg) 
     modalDlg.append(modalContent); 

     //$('#btnOKCLOSE').click(function() { alert('test'); }.bind(this)); Doesn't Work 
       //$('#btnOKCLOSE').click(function() { alert('test'); }); Doesn't Work 
     $('#btnOKCLOSE').click(okCallback.bind(this)); //doesn't work. 


     $(modal).modal('show'); 
    } 

} 

var Utils = new Utils(); 

Utils.showDialog("Title", $('<p/>', {'text': 'test'}), function (e) { alert('test');}); 

Answer 1

わからないが、私は、実際の要素へのコールバックを結合したときに、それが働いた：

okCallback = typeof okCallback != 'undefined' ? okCallback : function() { }; 
    var modal = $('<div />', { 'class': 'modal fade', 'role': 'dialog', id: 'mymodal' }); 
    var modalDlg = $('<div />', { 'class': 'modal-dialog' }); 
    var modalContent = $('<div />', { 'class': 'modal-content' }); 

    modalContent.append($('<div />', { 'class': 'modal-header', 'text': title }) 
        .append($('<button />', { 'type': 'button', 'class': 'close', 'data-dismiss': 'modal', 'aria-label': 'Close' }) 
         .append($('<span />', { 'aria-hidden': 'true' }).html('&times;')))); 
    modalContent.append($('<div />', { 'class': 'modal-body' }) 
        .append(html)); 
    modalContent.append($('<div />', { 'class': 'modal-footer' }) 
        .append($('<button />', { 'class': 'btn btn-primary', 'data-dismiss': 'modal', 'type': 'button', 'text': 'OK', id: 'btnOKCLOSE' }).click(okCallback.bind(this)))); 
    modal.append(modalDlg) 
    modalDlg.append(modalContent); 

    $(modal).modal('show'); 

    $(modal).on('hidden.bs.modal', function() { 
     $(modal).off('click'); 
     $(modal).remove(); 
    }); 

を