OKCallback/click -Ereignis wird nicht beim Bootstrap-Dialog ausgelöst

Question

Ich versuche, etwas Code zu speichern, indem ich Dialog mache, damit ich einfach den Inhalt übergeben kann und der Code den Rest erledigt. Ich baue etwas, wo ich ein paar Dialoge brauche, also denke ich logisch. Das Problem, das ich habe, ist, dass, wenn Sie OK auf der Schaltfläche im Dialogfeld drücken, ich die Rückruffunktion auslösen muss. Ich denke, ich bin irgendwo seit dem Klick-Ereignis, und damit der Rückruf, überhaupt nicht ausgelöst.

https://jsfiddle.net/qcvjndh6/

Code:

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

nicht sicher, was die Ursache war, aber als ich den Rückruf an den eigentlichen Element gebunden ist, es hat funktioniert:

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(); 
    });