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

Question

我刚开始使用 jquery。已经学到了一些东西并且喜欢它，但是几天来我一直在为以下问题而苦苦挣扎。我从 https://jqueryui.com/ 复制了“对话确认”功能.我将此脚本放在我的 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 文件中的内容。那时，没有 id 等于'dialog-confirm' 的 div。使用 ajax 加载 HTML 片段不会触发 DOMReady 事件。您需要做的是在使用 Ajax 加载 div 之后调用 .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" );
                 }
            }
        });
    });