Question

我遇到过一个问题而且不确定它的来源。我有以下带有动态加载内容的对话框：

$(function(){   
    $('.dialog_link_check_interval').click(function(){          
        var link = this;

        var link_id = link.id.split('-');
        link_id = link_id[1];

        $('#dialog_check_interval').dialog({
            autoOpen: false,
            width: 650,
            modal: true,
            buttons: {
                'OK': function() {                      
                    var check_interval_new = $('#check_interval_new').val();

                    $.ajax({
                        url: 'file.php',
                        type: 'GET',
                        data: 'property_id=' + link_id + '&check_interval=' + check_interval_new,
                    });

                    $(this).dialog('close');
                }
            }
        });

        $('#dialog_check_interval').load('dialog_generator.php?link_id=' + link_id).dialog('open'); 
    });     
});

和HTML

<div id='dialog_check_interval' title='Check interval' style='display: none;'></div>    
<div id='check_interval-123' class='dialog_link_check_interval'>
   <a href='#' style='border:0'>dialog link</a>
</div>

在动态加载的dialog_generator.php中，有一个id = check_interval_new的文本输入。我发现如果从javascript中删除check_interval_new，则对话框将按预期关闭。但是，当有check_interval_new时，对话框没有关闭（但是正如我在alert函数中找到的那样，从dialog_generator.php中正确检索了值），点击＆＃34; OK＆＃34;按钮（但是按下ESC或点击右上角的X键关闭）。

请注意，我尝试了除$(this).dialog('close');之外的其他各种功能来关闭$('#dialog_check_interval').dialog('close');等对话框。

Answer 1

听起来像是缺少事件委托。由于您使用的是动态注入的对话框，因此应将事件绑定到插入元素时存在的父级。

Delegation in jQuery

Answer 2

您对$ .ajax的调用未正确形成。应该是：

$.ajax({
    url: 'file.php',
    type: 'GET',
    data: {
      property_id: link_id,
      check_interval: check_interval_new,
    }
});

我发现至少有一个问题。

=====编辑=====

另外，请检查您在浏览器控制台中获得的内容。

=====编辑2 =====

只是为了充实我的一条评论：

var the_dialog = $('#dialog_check_interval');
the_dialog.dialog({
  autoOpen: false,
  width: 650,
  modal: true,
  buttons: {
    'OK': function() {                      
       var check_interval_new = $('#check_interval_new').val();

       $.ajax({
         url: 'file.php',
         type: 'GET',
         data: {
           property_id: link_id,
           check_interval: check_interval_new,
         } 
       }).success(function () {
         // consider adding a success function
       }).error(function () {
         // consider adding an error function
       });
       the_dialog.dialog('close');
    }
  }
});

jquery动态加载对话框没有关闭

2 个答案: