首次显示后 JQuery 对话框不起作用

Question

我在我的项目中使用 JQuery 对话框向用户显示餐厅菜单。 当用户设置食物数量时，它也会显示订单价格。所有这一切都发生在对话中。所以用户接受它的订单并提交它。订单表单位于另一个 php 文件中，该文件呈现为 json 并传递给包含对话框的 div。第一次一切都很好。但如果用户想提交另一个订单，则没有任何效果。不是 ajax 不提交表单或其他任何东西，用户必须重新加载页面到对话框再次正常工作。 这是我的对话代码：

$('#dialog-modal').dialog({
      autoOpen: false,
      resizable: false,
      width:900,
      height:500,
      hide: function () {
        $(this).fadeOut();
      },
      show:  function () {
        $(this).fadeIn();
      },
      open: function() {
        $('#dialog-modal').empty();
        $.ajax('<?php echo url()?>/admin/preload',{
          dataType:'json',
          cache: false,
          success:function(data){
            $('#dialog-modal').html(data.content);
          }
        });
      }
    });

open 函数中的 ajax 正在加载餐厅的菜单。 这是我的提交按钮。有两个提交按钮。一个用于提交并关闭对话框，另一个用于提交并打开另一个对话框进行提交。

 $('#submit').on('click',function(){
  var data = $('#form').serialize();
  $.post('<?php echo url()?>/admin/add-food',data);
  $('#dialog-modal').dialog('close');
});
$('#newSubmit').on('click',function(){
  var data = $('#form').serialize();
  $.post('<?php echo url()?>/admin/add-food',data);
  $('#dialog-modal').dialog('close');
  $('#dialog-modal').dialog('open');
});

编辑： 如果我在关闭功能中销毁对话框，它在所有情况下都可以正常工作，但在提交和新建按钮中，它关闭对话框并且不打开新对话框

Answer 1

我认为，可能是您的按钮动态呈现。所以我们需要向该按钮添加事件监听器。试试下面的代码。

$(document).on('click','#submit',function(){
  var data = $('#form').serialize();
  $.post('<?php echo url()?>/admin/add-food',data);
  $('#dialog-modal').dialog('close');
});
$(document).on('click','#newSubmit',function(){
  var data = $('#form').serialize();
  $.post('<?php echo url()?>/admin/add-food',data);
  $('#dialog-modal').dialog('close');
  $('#dialog-modal').dialog('open');
});