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

现在它有效......

jQuery选择器无法在.load（）中完成回调

1 个答案: