分类导航

jQuery 发布时间：2022-04-19 发布网站：大佬教程 code.js-code.com

大佬教程收集整理的这篇文章主要介绍了jQuery mobile在.load()之后没有点击事件，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

如果我将页面加载到“curr_recipe”并想要返回页脚中的链接到#home,那么页面#home上就不再有点击事件了. @L_197_3@代码来自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>