Question

我的PHP网页page1.php是这样的：

 <html>
  <head>
    <script src="//code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
    <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
    <script>
     function ciao(){
       $('#files').load('page2.php?SQL_type=files');
     }
     $(function(){
      $(".icon_files").bind("contextmenu",function(e){
       var left;
       var top;
       if($(document).width() < 630){
        left = 0;
        top = 0;
       }else{
        left = e.pageX;
        top = e.pageY;
       }
       $("#context").css({left: left, top: top});
       contextmenu($(this).attr('id'));
       e.preventDefault();
      });
     });
   </script>
 </head>
 <body>
  <button onclick="ciao()">ciao</button>
  <div id="files">
   <?php
    $_GET['SQL_type'] = 'files';
    include "page2.php";
   ?>
  </div>
 </body>
</html>

我已经构建了一个自定义上下文菜单，上面带有上面的代码当页面加载并通过PHP包含page2.php时它可以工作，但是当我通过jQuery更改#files内容时，上下文菜单（以及我还没有复制的所有其他功能）不再有效。
/> 我尝试了其他代码，例如

    jQuery.get('page2.php?SQL_type=files', null, function(data) {
      $('#files').append(data);
    }, 'html');

我也尝试过简单的Javascript

var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
  if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
    document.getElementById("files").innerHTML = xmlhttp.responseText;
  }
}
xmlhttp.open("GET", "page2.php?SQL_type=files", true);
xmlhttp.send();

在page2.php中，只有一些DIV，其中每个人都将icon_files作为类，并且它不再包含jQuery。它就像

<div class="icon_files">something</div><div class="icon_files">other</div>

我没有任何其他想法，这可能是什么问题？
谢谢

Answer 1

jquery代码正在运行，但是，单击该按钮后，jquery代码所针对的元素将被替换，从而导致它们丢失事件/数据。请尝试使用事件委派。这会导致事件绑定到id="files"元素而不是被替换的元素。

function ciao() {
  $('#files').html('<div class="icon_files">another icon...</div>');
}
$(function() {
  $("#files").on("contextmenu", ".icon_files", function(e) {
    var left;
    var top;
    if ($(document).width() < 630) {
      left = 0;
      top = 0;
    } else {
      left = e.pageX;
      top = e.pageY;
    }
    $("#context").css({
      left: left,
      top: top
    });
    console.log('context menu');
    e.preventDefault();
  });
});

<html>

<head>
  <script src="//code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
  <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
  <script>
  </script>
</head>

<body>
  <button onclick="ciao()">ciao</button>
  <div id="files">
    <div class="icon_files">icon...</div>
  </div>
</body>

</html>

jQuery加载中断函数

1 个答案: