Pandora ajax not working with waitForKeyElements

Question

Pandora AJAX is not working with waitForKeyElements. I have spent a few hours trying to see where I went wrong and can't work it out.

It works once but doesn't work when the next track is played.

// ==UserScript==
// @name         Pandora I am listening to
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  Pandora I am listening to
// @author       You
// @match        http*://www.pandora.com/*
// @include      https://www.pandora.com/station/play/*
// @require      https://gist.githubusercontent.com/BrockA/2625891/raw/9c97aa67ff9c5d56be34a55ad6c18a314e5eb548/waitForKeyElements.js
// @require     http://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js
// @grant    GM_addStyle
// ==/UserScript==

function liveNow() {
    setTimeout(function() {
        console.log(`Now Playing ${$(".songTitle")[0].innerHTML}`);
    }, 6000);  // delay for loading of music

}

waitForKeyElements ("#trackInfoContainer .songTitle", liveNow);

Answer 1

#trackInfoContainer is being reused (not created afresh) for each additional track.

So, it's not enough to wait for the node's creation, you must also check that the contents have changed.
Here's how to do that with waitForKeyElements:

waitForKeyElements ("#trackInfoContainer .songTitle", liveNow);

function liveNow (jNode) {
    var titleText  = jNode.text ().trim ();
    var lastText   = jNode.data ("lastText")  ||  "";

    if (titleText != lastText) {
        jNode.data ("lastText", titleText);
        console.log (`Now Playing ${titleText}`);
    }
    return true;  //-- Tell waitForKeyElements to keep checking this node.
}