대화를 만들어서 일부 코드를 저장하려고하므로 내용 만 전달하면 코드가 나머지를 처리합니다. 꽤 많은 대화가 필요한 곳에 무언가를 만들고 있으므로 이것이 논리적 접근이라고 생각합니다. 내가 가진 문제는 대화 상자의 버튼에서 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('×'))));
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');});
근본 원인이 무엇인지 확실하지 않지만 콜백을 실제 요소에 바인딩하면 작동했습니다.
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('×'))));
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();
});
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다