jQuery Mobile 在 .load() 之后没有点击事件

如果我将页面加载到“curr_recipe”中并希望使用页脚中的链接返回到#home，则页面#home 上不再有可用的点击事件； jquery 代码来自 m-index.php，我正在使用用户代理功能，因为我希望此页面出现在移动设备和个人电脑/笔记本电脑等上。

$(document).ready(function () { 
 
        $("#btnSearch").click(function() {searchFiles()}); 
        $("#testrecipe").click(function() { 
            $.mobile.changePage("#actRecipe"); 
            $("#curr_recipe").load("htmltodisplay.html", function() { 
                $.mobile.changePage("#home", {transition: "fade"}); 
            }); 
        }); 
        $("#btnReset").click(function() {resetInput()}); 
        $("#txtRecipe").click(function() {resetInput()});            
        $("#toSearch").click(function() {$.mobile.changePage("#searchPage", {transition: "slide"})}); 
        $("#allrecipes").click(function() { 
            $.mobile.changePage("#recipePage", {transition: "slide"}); 
            readFiles(true); 
        }); 
}); 
 
<div data-role="page" id="home"> 
    <div data-role="header"> 
    <h1>Head</h1> 
        </div> 
        <div data-role="content"> 
            <h1>What to do?</h1> 
        </div> 
        <div class="nav"> 
            <ul style="font-size:24px;" data-role="listview"> 
                <button id="toSearch">Rezept suchen</button> 
                <button id="allrecipes">Alle Rezepte</button> 
                <button id="testrecipe">Test Rezept</button> 
            </ul> 
        </div> 
    </div> 
 
 <div data-role="page" id="actRecipe"> 
    <div id="curr_recipe" data-role="content">  
 
    </div> 
    <div data-role="footer" data-position="fixed" data-id="oneFooter"> 
         <a style="font-size: 24px; width: 100%; border-radius: 0px;" href="#home" data-transition="fade">Menü</a> 
    </div> 
</div> 

要加载的页面

<!DOCTYPE html> 
 
<html lang="en" xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<script src="./jquery-2.0.0.js"></script> 
<link type="text/css" rel="stylesheet"  media="screen" href="./css/recipe_screen.css" /> 
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" /> 
<title></title> 
 
<script> 
    $(document).ready(function() { 
        var UserAgent = navigator.userAgent.toLowerCase(); 
 
        if (UserAgent.search(/(iphone|ipod|opera mini|fennec|palm|blackberry|android|symbian|series60)/) > -1) { 
            // mobiles Endgerät 
            document.getElementById("back").style.display = "none"; 
        } else {} 
 
    }); 
</script> 
 </head> 
 <body> 
<div id="title"></div> 
<h2 class="rphone"></h2> 
<div class="content"> 
    <ul id="ingredients"> 
 
    </ul> 
</div> 
<h2 class="rphone"> </h2> 
<div class="content" id="cooking"> 
 
</div> 
<div id="back"> 
    <a id="linkback" href="/rezepteV1/index.php">Zum Menü</a> 
</div> 
</body> 
</html> 

请您参考如下方法:

编辑:

你检查过 jquery on() 吗？ http://api.jquery.com/on/

假设该事件无法被触发，因为该元素当时不存在。使用 on() 你可以等待它，这样无论什么时候它都可以被触发。