javascript - jQuery 选择器在 .load() 完整回调中不起作用

Question

我正在使用nakupanda bootstrap3-dialog模态库。下面是创建和显示对话框的代码:

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() 在完整的回调中都没有任何影响，并且控制台中没有错误。怎么了？

Answer 1

我刚刚发现了问题所在。这段代码

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

现在可以了...