Javascript 为什么jquery函数不能在ajax加载的页面中的div上工作

我只是从jquery开始。我已经学到了一些东西，但我已经为以下问题挣扎了几天。 我从中复制了“对话框确认”功能。我将这个脚本放在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>

$（文档）.ready（函数（）{
$（函数（）{
$（“#对话框确认”）。对话框({
可调整大小：false，
身高：140，
莫代尔：是的，
按钮：{
“删除所有项目”：函数（）{
$（此）.dialog（“关闭”）；
},
取消：函数（）{
$（此）.dialog（“关闭”）；
}
}
});
});
$（窗口）。调整大小（函数（）{
$（'#滚动页面'）.height（$（窗口）.height（）-250）；
});
$（window.trigger（'resize'）；
$（'.container'）。在（'click'，'.main菜单'，函数（事件）{
event.preventDefault（）；
var url=$（this.attr（'href'）；
$.get（url、函数（数据）{
//警报（数据）；
$（“#div1”）.load（url）；
});
$（this.parent（）.addClass（'current_page_item'）；
$（this）.parent（）.sibles（）.removeClass（'current_page_item'）；
});
$（'.container'）。在（'click'，'.relapp'，函数（事件）上{
event.preventDefault（）；
//$（“.dialog确认”）.dialog（“打开”）；
var url=$（this.attr（'href'）；
$.get（url、函数（数据）{
//警报（数据）；
$（“#div1”）.load（url）；
});
});
});

如果我将匹配的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放在一个由ajax加载到div1中的页面中时，我无法让它工作

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

  </div>
</div>

---

有人能解释一下为什么会这样，以及我如何解决这个问题吗？

页面加载后，jquery只执行一次。然后启动工具所需的一切！ 这意味着每个.container都在被“转换”。

---

如果以后添加一个新的div.container，它还没有被“转换”。追加div后，必须再次执行jquery

页面加载后，jquery只执行一次。然后启动工具所需的一切！ 这意味着每个.container都在被“转换”。

---

如果以后添加一个新的div.container，它还没有被“转换”。追加div后，必须再次执行jquery

所发生的事情是，加载DOM后立即执行$（document）.ready（）函数。这个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" );
                 }
            }
        });
    });

---

所发生的事情是，加载DOM后立即执行$（document）.ready（）函数。这个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" );
                 }
            }
        });
    });

---

下面是程序中发生的情况（使用ajax加载div）：

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

有两种方法可以让它工作：

在ajax请求后调用

dialog（）

将

div

静态放置在页面上，并使用ajax请求更改内容

解决方案：

1-使用下面的代码，而不是

$（“#div1”）。加载（url）

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>


喋喋不休


然后用
$（“#对话框确认”）加载
..
而不是
$（“#div1”）。加载（url）
 以下是程序中发生的情况（使用ajax加载div）：


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

有两种方法可以让它工作：

在ajax请求后调用
dialog（）
将
div
静态放置在页面上，并使用ajax请求更改内容
解决方案：

1-使用下面的代码，而不是
$（“#div1”）。加载（url）

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>


喋喋不休


然后用
$（“#对话框确认”）加载
..
而不是
$（“#div1”）。加载（url）
 你是说你的div像：
…
在ajax加载之后吗？我想是的。创建脚本时，尚未加载div。这可能是个问题吗？分享小提琴是个好主意，你是说你的div像：
…
在ajax加载后？我想是的。创建脚本时，尚未加载div。这可能是个问题吗？分享小提琴是个好主意，你的理论是有道理的。当我将您的代码放入脚本中时，firebug会突出显示行$（“#div1”）.load（url，function（）{并说“url未定义”。如果我删除url，则不会再有错误，但脚本似乎不会被触发。很抱歉，我是个白痴：）把密码放错地方了，它就像一个符咒！我一拿到我的15个学分就会投票给你：）@skampen我想你“至少”可以如果这个答案符合你的需要，请在获得15个声誉之前将其标记为已被接受。：）成功了，新手的现场充满了障碍。你的理论是有道理的。当我将你的代码放入脚本中时，firebug会突出显示这一行