Jquery-第二次运行时跳过函数答案

【问题标题】：Jquery- Function being skipped when run second timeJquery-第二次运行时跳过函数
【发布时间】：2015-12-11 08:44:13
【问题描述】：

/**
	Returns a string with the iTunes data in table html format
**/
var appendValues = function(songArray) {
	songArray.each(function() {	
		var title = $(this).find("im\\:name").eq(0).text();
		var songImage = $(this).find("im\\:image").eq(0).text(); 
		var artist = $(this).find("im\\:artist").text();
		var album = $(this).find("im\\:collection").children().eq(0).text(); 
		var sample = $(this).find("link").eq(1).attr("href");
				
		$("#songs").append(
			"<tr>" +
				"<td>" + title + "</td>" +
				"<td>" + artist + "</td>" +
				"<td>" + album + "</td>" +
				"<td><img src=\"" + songImage + "\"/></td>" +
				"<td><audio controls>" +
				  "<source src=\"" + sample + "\" type=\"audio/x-m4a\">" +
				  "<source src=\"" + sample + "\" type=\"audio/x-m4a\">" +
				"Your browser does not support the audio element." +
				"</audio></td>" +
			"</tr>");
	});
}

/**
	Gets top song list from iTunes. Accepts two parameters, country and songNumber, which are inserted into URL.  Displays song list in HTML.
**/
var getSongs = function( country, songNumber ){
	  $.get("https://itunes.apple.com/" + country + "/rss/topsongs/limit=" + songNumber + "/xml", function(data){
		var songArray = $(data).find("entry");
		appendValues(songArray); //Function that adds values to html table
		
	}, "xml");
}

/**
	Gets user input from dropdown menu and slider. Calls getSongs function to update song list.
**/
var updateSongs = function(){
	
	//Get country input
	var country = $("#dropdown").val();
	
	if (country == "united_states"){
		country = "us";
	} else if(country == "india"){
		country = "in";
	} else {
		country = "tr";
	}
	
	//Get song number input
	var songNumber = $("#slider").slider("value");
	
	//Setup HTML table
	$("#songs").append(
		"<caption>iTunes Top Hits</caption>" +
		"<tr>" + 
			"<td colspan=\"5\">" +
				"<form>" +
				"<!-- Select menu found at https://api.jquerymobile.com/selectmenu/ -->" +
				  "<label for=\"select-choice-0\" class=\"select\">Select Country: </label>" +
					"<select name=\"select-choice-0\" id=\"dropdown\">" +
					  "<option value=\"united_states\">United States</option>" +
					  "<option value=\"india\">India</option>" +
					  "<option value=\"turkey\">Turkey</option>" +
					"</select>" +
				  "<br><br>" +
					"<div id=\"songNumber\">Number of Songs: <span id=\"number\">10</span><div id=\"slider\"></div></div>" +
				  "<br><br>" +
				  "<input type=\"button\" id=\"update\" value=\"Update\">" +
				"</form>" +
			"</td>" +
		"</tr>" +
		"<tr>" +
			"<th>Song Title</th>" +
			"<th>Artist</th>" +
			"<th>Album</th>" +
			"<th>Album Cover</th>" +
			"<th>Song Sample</th>" +
		"</tr>"
	);
	
	setupSlider();
	
	//Refresh song list
	getSongs(country, songNumber);
}

var setupSlider = function(){
	//Sets up the slider
	$("#slider").slider({
			orientation: "horizontal",
			range: 5,
			max: 30,
			value: 10
			//slide: updateText,
			//change: updateText
	});
}

var erase = function(){
	$("#songs tr").remove();
}

$(document).ready(function(){
	
	setupSlider();
	
	var country = "us";
	var val = $("#slider").slider("option", "value");
	getSongs(country, val);
	
	//On Update click, erase the old song list and update with current list.
	$("#update").click(function() {
		erase();
		updateSongs();
	});
});

table {
	table-layout: fixed; 
	width: 75%;
	margin: auto;
	
}

td {
	word-wrap: break-word;
}

audio {
	width: 100px;
	text-align: center;
}

table, th, td {
    border: 1px solid #c1c1c1;
	border-collapse: collapse;
}

td, th {
	padding: 5px;
	font-family: Arial, sans-serif;
	width: 100px;
}

caption {
	font-family: Verdana, sans-serif;
	font-weight: bold;
	font-size: 1.2em;
	padding-bottom: 5px;
}

tr:nth-of-type(even) {
	background-color: #eaeaea;
}

tr:nth-of-type(2) {
	background-color: black;
	color: white;
}

td:nth-of-type(4) {
	text-align:center;
}

td:nth-of-type(5) {
	text-align:center;
}

#slider {
	width: 150px;
}

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title></title>
	<!-- Custom Widget Theme -->
	<link rel="stylesheet" href="jquery-ui.css">
	<!-- jQuery Library -->
	<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>	
	<!-- jQuery UI Library -->
	<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
	<!-- CSS style sheet-->
    <link href="index.css" type="text/css" rel="stylesheet">
	<!-- Javascript-->
	<script type="text/javascript" src="index.js"></script>

</head>
<body>

<table  id="songs">
	<caption>iTunes Top Hits</caption>
	<tr>	
		<td colspan="5">
			<form>
			  <label for="select-choice-0" class="select">Select Country: </label>
				<select name="select-choice-0" id="dropdown">
				  <option value="united_states">United States</option>
				  <option value="india">India</option>
				  <option value="turkey">Turkey</option>
				</select>
			  <br><br>
				<div id="songNumber">Number of Songs: <span id="number">10</span><div id="slider"></div></div>
			  <br><br>
			  <input type="button" id="update" value="Update">
			</form>
		</td>
	</tr>
	<tr>
		<th>Song Title</th>
		<th>Artist</th>
		<th>Album</th>
		<th>Album Cover</th>
		<th>Song Sample</th>
	</tr>

</table>

</body>
</html>

我有一个函数对itunes 进行ajax 调用并获取附加到html 表的歌曲列表，并带有一个更新按钮，该按钮再次运行相同的函数。我在加载页面时运行该功能并且一切正常，但是当我单击更新时，该功能被跳过。我可以在 Firefox 调试器中观看它。编辑：我添加了一个代码 sn-p，但它不能正确显示；但是，问题仍然存在。

【问题讨论】：

动态加载数据时，触发#update点击事件？
请为该代码提供 jsfiddle。
你能展示你的 appendValues() 方法吗？
我已经添加了完整的代码。
您正在删除原来的#update 按钮，该按钮已绑定到（单击）事件处理程序。当您重新添加按钮时，它不再绑定事件处理程序，因为它是您正在添加的新 DOM 元素。尝试移动表格顶部的按钮...或事件委托（由下面的@madalin 回答）

标签： javascript jquery html ajax web

【解决方案1】：

尝试事件委托：

$("body").on('click','#update',function() {
        erase();
        updateSongs();
    });

【讨论】：

【解决方案2】：

erase() 方法正在删除完整的 DOM 元素（不是它的内容）。可能appendValues 方法需要该标签才能工作

【讨论】：

【解决方案3】：

我最终使用 .slice 方法选择只擦除前两行之后的内容。这解决了 Ochi 上面提出的问题，移除了原来的 #update 按钮以及与之相关的事件。

【讨论】：