Jquery Modal 在第二次单击通过 Ajax 传递的内容时不起作用

Question

我正在通过 ajax 调用将一些 html 加载到 div 中。在此 html 内容中，单击时会打开一个 jquery 模式。 在第一次单击时，模态会按应有的方式打开，但在随后的单击中，模态将不会打开并在控制台中出现此错误：

 Uncaught TypeError: $(...).dialog is not a function

这里是通过 ajax 调用生成的 html，点击它会打开模式：

 <div class="edit" rel="630000311">630000311</div>

这是与编辑类相关的 CSS：

.edit {
   cursor: pointer;
   color: blue;
   font-size: 16px;
   padding-left:5px;
   text-decoration: underline;
  }
  .ui-widget-overlay {
    position: fixed; 
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000;
    opacity: 0.7;
    filter: alpha(opacity=50); 
   }

这是我的 jquery

       $(document).ready(function(){
       $('body').on('click','.edit', function(){ 
      var myDialogX = $(this).position().left - $(this).outerWidth();
      var myDialogY = $(this).position().top - ( $(document).scrollTop() +      $('.ui-dialog').outerHeight() );
   $("#viewDialog").dialog({
       width: 1140,
       modal: true,
       position: { my: 'top', at: 'top+150' },
   });
   var partID = $(this).attr('rel');
        $.ajax({
            async: false,
            type: 'GET',
            url: "parthistory.php",
            data: {
                "partID" : partID
            },
            success: function (data) {
                $("#viewDialog").html(data);

            }
        });
});
});

我已尝试添加 $(document).trigger('ready');进入成功，但这无济于事

注意这是我正在加载的 jquery：

code.jquery.com/jquery-1.11.1.min.js"
code.jquery.com/ui/1.11.1/jquery-ui.min.js"
code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css" 

Answer 1

试试这个：

   $(document).ready(function(){
       $("#viewDialog").dialog({
           width: 1140,
           modal: true,
           autoOpen: false,
           position: { my: 'top', at: 'top+150' }
       });
       $('body').on('click','.edit', function(){ 
           $("#viewDialog").dialog('open');
           var myDialogX = $(this).position().left - $(this).outerWidth();
           var myDialogY = $(this).position().top - ( $(document).scrollTop() + $('.ui-dialog').outerHeight() );
           var partID = $(this).attr('rel');
           $.ajax({
                async: false,
                type: 'GET',
                url: "parthistory.php",
                data: { "partID" : partID },
                success: function (data) {
                    $("#viewDialog").html(data);
                }
           });
       });
   });

在诸如单击之类的事件中实例化对话框是一个常见的错误，然后由于 autoOpen 属性默认为 true，因此对话框将首次工作。下次单击时，将忽略实例化对话框的尝试，并且不会打开对话框。

修复：在点击之外实例化您的对话框，将 autoOpen 设置为 false，然后在所需事件内打开它。

This stack overflow question 有一个很好的答案，可以更深入地解释这一点。

此外，您可以在对话框中设置位置值后删除逗号，因为它是您设置的最后一个属性。

旁注： 检查您正在导入的 jQuery 版本。当导入多个版本或过时版本的 jQuery 时，可能会出现类似的奇怪问题。