Question

我正在尝试在点击某些导航元素（#slide-content）时更新div（h2.pagenav）的内容。内容结构是统一的，每个请求的HTML文档包含两个这样的nav元素（'Previous'，'Next'）。但是，我的监听器只会在页面加载时出现的初始导航按钮上触发一次点击事件，我不明白为什么。

我的理解是，当使用jQuery的append()函数而不是html()时，附加的内容应该在DOM中注册，因此可用于事件监听。 Lil'帮助？

页面结构非常简单：

HTML

<?php require('common.php'); ?>
<!doctype html>
<html class="no-js" lang="en">
<head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>Ethogram Lab</title>
    <link rel="stylesheet" href="css/foundation.css"/>
    <link rel="stylesheet" href="css/foundation-icons.css"/>
    <link rel="stylesheet" href="css/app.css"/>
    <script src="js/vendor/modernizr.js"></script>
</head>

<body>

<div id="slide-content">
    <div class="slide">
        <div class="row">
            <div class="row">
                 <!---- content ---->
            </div>
            <div class="row">
                <div class="small-4 small-centered columns">
                    <h2 data-link="slide_0" class="medium button expand text-center pagenav">Start &nbsp;&nbsp;&nbsp;<i class="fi-play"></i></h2>
                    </div>
                </div>
            </div>
        </div>
    </div>

</div>
<script src='js/vendor/jquery.js'></script>
<script src='js/foundation.min.js'></script>
<script>
    $(document).foundation();
</script>
<script src='js/app.js'></script>

</body>
</html>

Javascript
以下是app.js

的相关内容

/**
 *  PAGE VARS
 */

var DS = '/';
var WEBROOT = "127.0.0.1"+DS+"ethogram"+DS;
var PHP = ".php";

/**
 * DOM LISTENERS
 */
$(".pagenav").click(function() {
    console.log("*** pagenav listener has fired");
    var loc = $(this).attr('data-link');
    var pageNum = loc.substr(-2) == "_" ? loc.substr(-1) : loc.substr(-2);
    var URL = WEBROOT+"slides"+DS+loc+PHP;
    $.get(URL, function(data) {
        $("#slide-content").html('').append(data).fadeIn();
    });
});

Answer 1

应使用“.on（）”函数。 “.live（）”已被弃用。

.on() function

$("body").on("click", ".pagenav", function() {
    // do something
});

Answer 2

你应该使用

$("body").on ("click",".pagenav",function(){
    // Your code go here
})

此功能将检测以编程方式创建的项目设置Documentation

Javascript：通过jquery.get（）更新的DOM元素不响应现有的页面侦听器

2 个答案: