Jquery模态不工作在第二次点击内容通过Ajax交付

Jquery Modal Doesnt Work On Second Click on content delivered via Ajax

本文关键字：交付 Ajax 模态 工作 第二次 Jquery      更新时间：2023-09-26

我正在从ajax调用加载一些html到div中。在这个html内容中，当点击打开一个jquery模式。在第一次点击时，模态打开，但在随后的点击中，模态不会打开，并在控制台中得到这个错误:

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

这是通过ajax调用生成的html，当点击时将打开模式:

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

下面是与edit类相关的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"

试试这个:

   $(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，并打开它的内部所需的事件，而不是

这个堆栈溢出问题有一个很好的答案，可以更深入地解释这个问题。

同样，你可以删除逗号后，你设置你的位置值在你的对话框，因为它是最后一个属性，你正在设置。

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

相关文章：