為什么我的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！