（jQuery）Uncaught TypeError：無法調用未定義的方法'替換'

Question

 $.ajax({ 
    error: function(){alert('Error retrieving candidates from database.');}, 
    success: function(data){ 
    var template = ' <div class="candidate" id="candidate-$1">\r\n\ 
    <div class="header">\r\n\ 
     <div class="picture"><a href="$2" class="target[\'_blank\']"><img src="pictures/$1.jpg" alt="$4" /></a></div>\r\n\ 
     <h2><a href="$2" class="target[\'_blank\']">$4</a></h2>\r\n\ 
     <h3>$5</h3>\r\n\ 
     <div class="stats">\r\n\ 
     <span class="alike" title="You have $6% in common with John Galt."><span class="number">$6</span>%</span>\r\n\ 
     <span class="similarity-graph" title="$7% of survey takers have less in common with $3 than you do; $8% of survey takers have more in common with $3 than you do.">$7,$8</span>\r\n\ 
     <span class="certainty-graph" title="PrezMatch.com is $9% certain that John Galt is your best match.">$9</span>\r\n\ 
     </div>\r\n\ 
    </div>\r\n\ 
    <div class="tabs">\r\n\ 
     <span class="active profile-tab"><a href="javascript:;">Profile</a></span>\r\n\ 
     <span class="keypoints-tab"><a href="javascript:;">Key points</a></span>\r\n\ 
    </div>\r\n\ 
    <div class="active content profile-content">\r\n\ 
     $10\r\n\ 
    </div>\r\n\ 
    <div class="content keypoints-content"></div>\r\n\ 
    </div>\r\n'; 
    var result = '\r\n'; 
    $(data).children().first().children().each(function(){ 
    var temp = template; 
    temp = temp.replace(/\$1/g, $(this).attr('id')); 
    temp = temp.replace(/\$2/g, $(this).children('link').first().html()); 
    temp = temp.replace(/\$3/g, $(this).attr('gender').toLowerCase() == 'm' ? 'him' : 'her'); 
    temp = temp.replace(/\$4/g, $(this).children('name').first().html()); 
    temp = temp.replace(/\$5/g, $(this).children('subtitle').first().html()); 
    temp = temp.replace(/\$6/g, '<span class="percent-in-common"></span>'); 
    temp = temp.replace(/\$7/g, '<span class="less-in-common"></span>'); 
    temp = temp.replace(/\$8/g, '<span class="more-in-common"></span>'); 
    temp = temp.repalce(/\$9/g, '<span class="percent-certain"></span>'); 
    temp = temp.replace(/\$10/g, $(this).children('profile').first().html()); 
    result += temp; 
    }); 
    result = $(result); 
    $('#candidates').prepend(result); 
    }, 
    url: 'data/candidates.xml' 
}); 

我無法爲我的生活診斷出這個問題。我有一個非常相似的方法來從questions.xml中得到問題，這很好，但是這個在jquery.min.js文件中產生了一個錯誤。

請幫忙嗎？

Answer 1

難道是因爲你在$ 9行拼寫「repalce」（而不是「replace」）？ ;-)

Answer 2

我能否說服您使用Douglas Crockford's version of supplant？實現你使用它的過程要容易得多。其實我會轉換你的代碼來使用它：

$.ajax({ 
    error: function() { 
     alert('Error retrieving candidates from database.'); 
    }, 
    success: function(data) { 
     var template = '<div class="candidate" id="candidate-{id1}">\r\n\ 
<div class="header">\r\n\ 
    <div class="picture"><a href="{id2}" class="target[\'_blank\']"><img src="pictures/{id1}.jpg" alt="{id4}" /></a></div>\r\n\ 
    <h2><a href="{id2}" class="target[\'_blank\']">{id4}</a></h2>\r\n\ 
    <h3>{id5}</h3>\r\n\ 
    <div class="stats">\r\n\ 
    <span class="alike" title="You have {id6}% in common with John Galt."><span class="number">{id6}</span>%</span>\r\n\ 
    <span class="similarity-graph" title="{id7}% of survey takers have less in common with {id3} than you do; {id8}% of survey takers have more in common with {id3} than you do.">{id7},{id8}</span>\r\n\ 
    <span class="certainty-graph" title="PrezMatch.com is {id9}% certain that John Galt is your best match.">{id9}</span>\r\n\ 
    </div>\r\n\ 
</div>\r\n\ 
<div class="tabs">\r\n\ 
    <span class="active profile-tab"><a href="javascript:;">Profile</a></span>\r\n\ 
    <span class="keypoints-tab"><a href="javascript:;">Key points</a></span>\r\n\ 
</div>\r\n\ 
<div class="active content profile-content">\r\n\ 
    {id10}\r\n\ 
</div>\r\n\ 
<div class="content keypoints-content"></div>\r\n\ 
</div>\r\n'; 
     var result = '\r\n'; 
     $(data).children().first().children().each(function(){ 
      var t = $(this), temp = template.supplant({ 
       id1: t.attr('id'), 
       id2: t.children('link').first().html(), 
       id3: t.attr('gender').toLowerCase() == 'm' ? 'him' : 'her'), 
       id4: t.children('name').first().html(), 
       id5: t.children('subtitle').first().html(), 
       id6: '<span class="percent-in-common"></span>', 
       id7: '<span class="less-in-common"></span>', 
       id8: '<span class="more-in-common"></span>', 
       id9: '<span class="percent-certain"></span>', 
       id10: t.children('profile').first().html() 
      }); 
      result += temp; 
     }); 
     $('#candidates').prepend($(result)); 
    }, 
    url: 'data/candidates.xml' 
}); 

我認爲這看起來更清潔。如果您想堅持使用基於jQuery的解決方案，您還可以查看jQuery templating。

如果您在我發佈的鏈接中使用該版本，您將很高興知道支持ECMAScript更新版本的瀏覽器將會用它們的內置版本覆蓋它，希望能夠提高性能。

另外，作爲一般性建議，我會將您的模板聲明移到ajax調用之外，以便在每次調用success時不會重新創建它。