Jquery two .get() 함수가 다르게 작동합니다.

Question

첫 번째 .get() 함수는 모든 브라우저에서 올바르게 작동하며 두 번째 함수는 Firefox에서 매번, 즉 Chrome에서 매 2 회만 작동하고 IE에서는 전혀 작동하지 않습니다.

코드가 $(document).ready 함수로 묶여 있으므로 페이지 로딩에 문제가 없어야합니다.

첫 번째 .get() 함수는 RSS 피드에서 최신 뉴스를 가져와 <ul>에 게시합니다. 두 번째 .get() 함수는 다른 RSS 피드에서 같은 것을 가져오고 비슷한 방식으로 게시하지만 차이점은 이미지 소스도 가져오고이 이미지를 코드 마지막 부분의 <canvas> 요소로 그려 넣는 것입니다.

이미지를 캔버스 요소로 가져 오지 않고 이미지 소스를 가져 오지 않고도 두 번째 .get() 함수는 Chrome에서 항상 작동하지 않으며 IE에서는 작동하지 않습니다. 첫 번째 방법은 모든 브라우저에서 매번 작동합니다.

저는 캔버스 요소에 다른 이미지를 그리기 위해 유사한 코드를 사용하고 있으며, 언제 어디서나 올바르게 작동합니다.

//The first, working .get() function: 
$.get("rss-url", function (data) { 
    var $xml = $(data); 
    var $i = 0; 
    $xml.find("item").each(function() { 
     var $this = $(this), 
      item = { 
       title: $this.find("title").text(), 
       link: $this.find("guid").text(), 
       pubDate: $this.find("pubDate").text(), 
      } 
     //Do something with item here... 
     if ($i < 10) { 
      var pv = new Date(item.pubDate).toLocaleString(); 
      $("#uutiset_latest > ul").append("<li><a href=" + item.link + ">" + item.title + "</a><br>" + pv + "</li>"); 
     } 
     $i++; 
    }); 
}); 


//Second, not so working .get() function: 

$(function() { 
    var img0, img1, img2; 
    $.get("rss-url", function (data) { 
     var $xml = $(data); 
     var $i = 0; 
     $xml.find("item").each(function() { 
      var $this = $(this), 
       item = { 
        title: $this.find("title").text(), 
        link: $this.find("guid").text(), 
        pubDate: $this.find("pubDate").text(), 
        pic: $this.find("description").html() 
       } 
      if ($i < 3) { 
       var pv = new Date(item.pubDate).toLocaleString(); 
       var parsed = $('<div/>').html(item.pic); 
       var picSrc = parsed.find("img").attr("src"); 
       $("#right_column_feed > ul").append("<li><a href=" + item.link + ">" + item.title + "</a><div id='tsemppi_div" + $i.toString() + "'><canvas id='tsemppi_canvas" + $i.toString() + "' width='150' height='100' class='tsemppi_canvas'></canvas></div>" + pv + "</li>"); 
      } 
      switch ($i) { 
       case 0: img0 = picSrc; break; 
       case 1: img1 = picSrc; break; 
       case 2: img2 = picSrc; break; 
      } 
      $i++; 
     }); 
     drawImages2(); 
    }); 

//the function to draw the images into <canvas> elements: 

    function drawImages2() { 
     var imgWidth = 150; 
     var imgHeight = 100; 
     var $z = 0; 

     $(".tsemppi_canvas").each(function() { 
      var ctx = document.getElementById("tsemppi_canvas" + $z.toString()).getContext("2d"); 
      var canvImage = new Image(); 
      canvImage.onload = function() { 
       ctx.drawImage(canvImage, 0, 0, imgWidth, imgHeight); 
      } 
      switch ($z) { 
       case 0: canvImage.src = (img0); break; 
       case 1: canvImage.src = (img1); break; 
       case 2: canvImage.src = (img2); break; 
      } 
      $z++; 
     }); 
    }; 
}); 

이러한 모든 기능은 동일의 .js 파일에있는, 이미지, 웹 페이지 및 RSS 피드는의 .js 파일과 같은 서버에 있습니다. 내가 그것을 알아 냈

Answer 1

좋아, 그것은이 줄을이었다 : 나는 텍스트가 아닌 HTML을 얻을 수를 변경

pic: $this.find("description").html() 

지금은 모든 브라우저에서 작동 :

pic: $this.find("description").text()