jQuery的負載斷開功能

-1

我的PHP網頁page1.php中是這樣的：jQuery的負載斷開功能

<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內容時，contextmenu（以及其他所有我沒有複製的功能）不再有效。

我試過其他類似的代碼

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>

我沒有任何其他的想法，這裏可能是什麼問題？
謝謝

來源

2015-05-12 Francesco Sorge

jQuery代碼運行時，然而，jQuery代碼被靶向元素被點擊按鈕，從而導致它們失去事件/數據之後代替。 –

那麼我應該在執行加載後重新添加事件嗎？ –

@FrancescoSorge你可以但只是委託這些事件會更簡單 –

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>

來源

2015-05-12 14:29:52

非常感謝！它完美的作品：D –

jQuery的負載斷開功能

回答

相關問題