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（＆＃39; ready＆＃39;）;进入成功，但这没有帮助

注意这是我正在加载的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时，会出现与此类似的奇怪问题。

Jquery Modal无法工作第二次点击通过Ajax提供的内容

1 个答案: