为什么我的jquery函数在Ajax加载的页面中的div上不起作用

Question

我只是从jQuery开始。 已经学到了一些东西并且喜欢它，但是几天来我一直在努力解决以下问题。 我从https://jqueryui.com/复制了“ dialog-confirm”功能。 我将此脚本放在index.php页面上的标签之间。

<script type = "text/javascript">

$(document).ready(function(){

    $(function() {
    $( "#dialog-confirm" ).dialog({
        resizable: false,
        height:140,
        modal: true,
        buttons: {
            "Delete all items": function() {
                $( this ).dialog( "close" );
                },
                Cancel: function() {
                $( this ).dialog( "close" );
            }
        }
    });
  });

  $(window).resize(function() {
      $('#scrollpage').height($(window).height() - 250);
  });
  $(window).trigger('resize');

    $('.container').on('click', '.mainmenu', function(event){
      event.preventDefault();

        var url = $(this).attr('href');
        $.get(url, function(data) {
          //alert(data);
          $("#div1").load(url);
        });

        $( this ).parent().addClass('current_page_item');
      $( this ).parent().siblings().removeClass('current_page_item');
  });

  $('.container').on('click', '.rapport', function(event){
      event.preventDefault();
        //$(".dialog-confirm").dialog( "open" );

        var url = $(this).attr('href');
        $.get(url, function(data) {
        //alert(data);
        $("#div1").load(url);
      });
  });
});

</script>

如果我将匹配的div放在同一index.php页面中。 它工作正常，div弹出。

<div id="dialog-confirm" title="Empty the recycle bin?">
  <p><span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 20px 0;"></span>Blablabla</p>
</div>

但是，当我将div放置在div1中由ajax加载的页面中时，我无法使其工作。

<div class="scrollpage" id="scrollpage">
  <div class="container" class="page" id="div1">

  </div>
</div>

谁能向我解释这是为什么，以及我该如何解决？

Answer 1

这是因为您的$（document）.ready（）函数在DOM加载后立即执行。 该DOM包含html文件中的内容。 当时，没有div的id等于'dialog-confirm' 。 用ajax加载HTML片段不会触发DOMReady事件。 您要做的是在将div加载了Ajax之后调用.dialog（）jQuery函数：

    $("#div1").load(url, function() {
        $( "#dialog-confirm" ).dialog({
            resizable: false,
            height:140,
            modal: true,
            buttons: {
                "Delete all items": function() {
                    $( this ).dialog( "close" );
                 },
                 Cancel: function() {
                    $( this ).dialog( "close" );
                 }
            }
        });
    });

Answer 2

这是您的程序中发生的事情（用ajax加载div）：

• 首先，您的脚本通过查找ID为dialog-confirm的元素来启动对话框窗口容器。
• 由于您还没有具有该ID的元素，因此无法准备对话框容器。

有两种方法可以使其起作用：

1. 在ajax请求后调用dialog() ，
2. 将div静态放置在页面上，并通过ajax请求更改内容。

解决方案：

1-使用下面的代码代替$("#div1").load(url);

    $("#div1").load(url, function(){
       $( "#dialog-confirm" ).dialog({
          resizable: false,
          height:140,
          modal: true,
          buttons: {
              "Delete all items": function() {
                  $( this ).dialog( "close" );
                  },
                  Cancel: function() {
                  $( this ).dialog( "close" );
              }
          }
       });
    });

2-将div静态放置在您的页面上：

    <div class="scrollpage" id="scrollpage">
       <div class="container" class="page" id="div1">
         <div id="dialog-confirm" title="Empty the recycle bin?">
            <p><span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 20px 0;"></span>Blablabla</p>
         </div>
       </div>
    </div>

然后使用$("#dialog-confirm").load(data);仅加载<p>... 而不是$("#div1").load(url); 。

Answer 3

页面加载后，jquery只执行一次。 然后启动该工具所需的一切！ 这意味着每个.container都在“转换”。 如果以后添加新的div.container，则尚未进行“转换”。 附加div后，您必须再次执行jquery！