Использование API Google Feeds для автоматического создания списка каналов в jquery mobile с помощью "касания"

Question

У меня возникла проблема при создании списка элементов фидов (с помощью Google Feeds API), вызванного событием касания элемента списка. Я могу вызвать функцию при загрузке страницы, и она прекрасно работает. Тем не менее, когда я пытаюсь вызвать функцию по событию "тап", если генерируется пустая страница.

Вот элемент списка, для которого я хочу вызвать событие (для которого я вызываю событие "tap"):

<li id="welstech" class="listFeeds">
        <a href="#">
         <img src="_images/welstech-logo-db.jpg" alt="WELSTech" />       
         <h2>WELSTech Podcast</h2>
         <p>Discussions about Tech & Ministry</p>
        </a>
       </li>

Вот скрипт, который я поместил внизу HTML-страницы:

    <script type="text/javascript>
    $(document).on('tap', '.listFeeds', function() {
    listAudioPosts("http://feeds.feedburner.com/welstech");
});
    </script>

Вот функция, которую она вызывает:

function listAudioPosts(feedurl){
    google.load("feeds", "1");
console.log("I'm still going 1");
    function initialize() {
console.log("I'm still going 2");
      var feed = new google.feeds.Feed(feedurl);
      feed.setNumEntries(10)
      var output = '<ul data-role="listview" data-split-icon="info">';
      var name = "welstech";
      feed.load(function(result) {
          if (!result.error) { 
              for (var i = 0; i < result.feed.entries.length; i++) {
                  var entry = result.feed.entries[i];
                  var mediaGroups = result.feed.entries[i].mediaGroups[0].contents[0];
                  var stripContentSnippet = entry.contentSnippet.replace(/[^a-zA-Z 0-9.:-]+/g,'');
                  var stripaContentSnippet = stripContentSnippet.replace('lt--pagingfilter--gt','');
                  output += '<li>';
                  output += '<a href="#">';
                  output += '<h2>' + entry.title + '</h2>';
                  output += '<p>' + stripaContentSnippet + '</p>';
                  output += '</a>';
                  output += '</li>';
                } // loop through all the feeds and create li elements
            } // end of if statement
            output += '</ul>';
            $("#testtouchoutput").html(output).trigger('refresh');
            $.mobile.changePage("#test");
        }); // end feed.load (function(result)
    } // end initialize function
    google.setOnLoadCallback(initialize);   
}

Я знаю, что функция работает, потому что я могу вызвать ее при загрузке страницы с помощью этого скрипта в нижней части моей HTML-страницы, см. Ниже. Я также знаю, что функция доходит до подфункции initialize(), так как я вижу вывод console.log перед этой подфункцией, но не после нее:

<script type="text/javascript">
    listAudioPosts("http://feeds.feedburner.com/welstech");
</script>

Поэтому, как только загружается домашняя страница, запускается функция, и страница обновляется до списка, который я хочу сгенерировать... за исключением того, что я хочу сгенерировать его по событию "tap".

Я довольно новый программист jquery, так что я уверен, что это что-то очевидное. Что мне не хватает?

Благодарю.

Answer 1

Вы не закрыли.on, попробуйте что-то вроде этого:

<script type="text/javascript>
    $(document).ready(function() {
        var timeTouched;
        $('.listFeeds').bind('touchstart', function() {
            timeTouched = new Date().getTime();
        }
        $('.listFeeds').bind('touchend', function() {
            if (new Date().getTime() - timeTouched < 200) { // Ended touch within 200 milliseconds, counts as a tap
                listAudioPosts("http://feeds.feedburner.com/welstech");
            }
        });
    });
</script>

Убедитесь, что ваш скрипт находится выше, где бы ни был определен элемент.listFeeds, вы включаете часть $(document).ready(), иначе он не сможет привязать событие к этому элементу.

ОБНОВЛЕНИЕ: тап, кажется, не является событием, обновленным с потенциальным решением.

ОБНОВЛЕНИЕ 2: Попытка с.bind вместо.on.