logo标签列表

jQuery mobile 在 .load() 后无法触发点击事件

jqueryjquery-mobilemobilehyperlinkload
5
如果我在"curr_recipe"中加载一个页面，并希望通过页脚中的链接返回到#home，那么在#home页面上将不再有可用的点击事件；JQuery代码来自于m-index.php，并且我正在使用用户代理函数，因为我想在移动设备和PC /笔记本电脑等设备上使用此页面。
$(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>
1
在 .html 文件中没有错误，并且我添加了一个回调函数： $("#testrecipe").click(function() { $.mobile.changePage("#actRecipe"); $("#curr_recipe").load("anypage.html", function() { $.mobile.changePage("#home", {transition: "fade"}); }); });但是仍然存在同样的问题，我可以看到 #home 页面，但是在手动重新加载页面之前无法“交互”。 - tommygeek
我之前做了，但现在出现错误，因为更改了不存在的元素的innerHTML。 - tommygeek
如果您遇到此类错误，则表示元素未加载到DOM中。我将在jsfiddle上为您提供一个示例。 - Omar
你推荐使用 jQuery 1.9.1，你有检查过那个“fiddle”吗？ - Omar
谢谢，快乐的忍者和Omar！ @Omar，是的，我检查了这个fiddle，但我不知道你的版本有什么区别。 - tommygeek
显示剩余18条评论
1个回答
1

编辑：

你是否检查过jquery的on()函数？http://api.jquery.com/on/

假设事件不能被触发，因为元素在此时不存在。使用on()函数，你可以等待它，所以它可以在任何时刻被触发。

抱歉，我不明白如何 /: - tommygeek
你能提供更多的代码吗？也许问题不在你认为的地方。 - happy
你的意思是我应该用jQuery on()替换#home页面上的按钮点击事件吗？ - tommygeek
抱歉，这是我第一次使用jQuery做项目！好的，我会尝试的。 - tommygeek
你只需要翻译以下关于编程的内容即可，不必觉得抱歉 ;) - happy
与之前相同的错误：Uncaught TypeError: Cannot call method 'changePage' of undefined; 如果我回到＃home并点击btnSearch，就会出现此错误。 - tommygeek
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接