jQuery-在第二次运行时被跳过的功能

Question

 /** 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调试器中观看它。 编辑：我已经添加了一个代码段，但是它不能正确显示； 但是，问题仍然存在。

Answer 1

尝试事件委派：

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

Answer 2

erase()方法将删除整个DOM元素（不包含其内容）。 可能appendValues方法要求该标记起作用

Answer 3

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