Javascript：通過jquery.get（）更新的DOM元素不響應現有的頁面偵聽器
[英]Javascript: DOM elements updated via jquery.get() aren't responding to extant page listeners
問題描述
我正在嘗試在單擊某些導航元素（ h2.pagenav ）時更新div（ #slide-content ） #slide-content 。 內容結構是統一的，每個請求的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 <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();
});
});
2 個解決方案
解決方案1
1 已采納 2014-03-07 19:50:56
應使用“.on（）”函數。 “.live（）”已棄用。
$("body").on("click", ".pagenav", function() {
// do something
});
解決方案2
1 2014-03-07 19:52:06
DOM元素不響應jquery
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.