JQuery 动态对话框 Div

Question

背景：
带有行的表格是使用 php 在页面上动态创建的。 使用jquery-ui-1.8.14.custom.min.js和jquery-1.5.1.min.js

目标： 我希望能够单击一行，该行将使用 php 页面中的新内容更新 Jquery Ui 对话框 div，然后在 Jquery Ui 对话框中显示此内容。

$(function(){
  $('tr').live('click', function(){
    $('.ui-dialog').load('<?php echo base_url();?>index.php/a/b/1');
    $('.ui-dialog').dialog('open');
  });
});

此代码使对话框非常快速地出现和消失，而不会停止。 我还尝试了以下我认为可行的方法：

$(function(){
  $('tr').live('click', function(){
    $('.ui-dialog').load('<?php echo base_url();?>index.php/a/b/1',
      function(){
        $('.ui-dialog').dialog('open')
    });
  });
});

对话框代码：

$(function(){$('.ui-dialog').dialog({
        autoOpen: false,
        width: 600,
        draggable: true,
        resizable: true,
        open: function(){
                        $('.ui-widget-overlay').fadeIn();},
        beforeClose: function(){
                        $('.ui-widget-overlay').fadeOut();},
        show: "fade",
        hide: "fade", 
        buttons: {
        "Back to search": function() { 
            $(this).dialog("close"); }
        }
    })});

非常感谢任何帮助。谢谢。

Answer 1

当你像这样初始化时：

$(function(){$('.ui-dialog').dialog({
    autoOpen: false,
    width: 600,
    draggable: true,
    resizable: true,
    open: function(){
                    $('.ui-widget-overlay').fadeIn();},
    beforeClose: function(){
                    $('.ui-widget-overlay').fadeOut();},
    show: "fade",
    hide: "fade", 
    buttons: {
    "Back to search": function() { 
        $(this).dialog("close"); }
    }
})});

它将 HTML 添加到 .ui-dialog 当你 .load() 时它会删除它。

您需要做的是将初始化代码放在ajax加载之后，或者：

$(function(){
  $('tr').live('click', function(){
    $('.ui-dialog .ui-dialog-content').load('<?php echo base_url();?>index.php/a/b/1',
      function(){
        $('.ui-dialog').dialog('open')
    });
  });
});

http: //jsfiddle.net/hgeYs/4/

Answer 2

像这样的东西

$(function() {
    $('tr').live('click', function() {
        var obj = $('<div/>');
        obj.load('<?php echo base_url();?>index.php/a/b/1', function() {
            obj.dialog({
                close: function(event, ui) {
                    $(this).dialog("destroy")
                }
            })
        })
    })
})