2017-07-07 7 views
0

私はnakupanda bootstrap3-dialogライブラリをモーダルに使用しています。jQueryセレクタが.load()コールバックで機能しない

function createIncommingCallDialog(msg){ 
    offermsg = msg; 
    incommingCallDialog = new BootstrapDialog({ 
     message: $('<div></div>').load('./RemoteDialog.html', function() { 
     //this code is not working. Neither .text() nor .click() has any 
     //affect. 
     $('.caller').text(offermsg.from); 
     $('.incomming').text('incoming call'); 
     $('#accept').click(function(){ 
      incommingCallDialog.close(); 
     }); 
     $('#decline').click(function(){ 
      incommingCallDialog.close(); 
     }); 
     }), 
     closable: false, 
    }); 
    incommingCallDialog.realize(); 
    incommingCallDialog.getModalFooter().hide(); 
    incommingCallDialog.getModalHeader().hide(); 
    incommingCallDialog.getModalBody().css('background-color', '#1A1A1A'); 
    incommingCallDialog.getModalBody().css('color', '#fff'); 
    incommingCallDialog.open(); 
} 

私はjQueryの.LOAD()メソッドを使用して、ダイアログで、リモートのhtmlをロードしていますし、それが完了したときに、私はdiv要素やボタンのテキストとリスナーを設定しています:下のダイアログを作成し、表示するためのコードです。しかし、何も起こりません。 .text()も.click()も完全なコールバックの中には何の影響もなく、コンソールにエラーはありません。どうしましたか?

+0

イベント委任の問題:だから私は、このようにコードを変更しましたか? – guradio

+0

'console.log'を実行して、機能が完了していることを確認しましたか? – Lewk

+0

はい、それは完了していました...私は問題を理解し、以下の回答を掲載しました –

答えて

3

私はただ問題を理解しました。このコード

message: $('<div></div>').load('./RemoteDialog.html', function() { 
    //this code is not working. Neither .text() nor .click() has any 
    //affect. 
    $('.caller').text(offermsg.from); 
    $('.incomming').text('incoming call'); 
    $('#accept').click(function(){ 
     incommingCallDialog.close(); 
    }); 
    $('#decline').click(function(){ 
     incommingCallDialog.close(); 
    }); 
    }), 

は、メイン文書にDOM要素(.caller、.incomming、#acceptなど)を探していたと、彼らは$('<div></div>')の内側にロードされ、まだに添付されていないので、時にはそれはそれらを見つけることができませんでしたメイン文書。今

message: $('<div></div>').load('./RemoteDialog.html', function() { 
     $(this).find('.caller').text(offermsg.from); 
     $(this).find('.incomming').text('incoming call'); 
     $(this).find('#accept').click(function(){ 
      incommingCallDialog.close(); 
     }); 
     $(this).find('#decline').click(function(){ 
      incommingCallDialog.close(); 
     }); 
     }), 

それが動作する...

関連する問題