Can't get jquery on click code to work

I'm having a problem with a piece of code which plays a short mp3/ogg file when a font awesome volume icon is clicked. The html works OK. The problem is with the js code

<p id="pathVar">/templates/beez_20/audio/dialogs/buy_flowers/</p>
<div id="dialog">
      <div id="title_block">Buying flowers </div>
    <div id="dlg_container">
    <div id="audio_player" >{audio}Buying flowers|dialogs/buying_flowers/buying_flowers.mp3{/audio}</div>
        <p class="dlg_content eng_dlg"><span class="dlg_text" id="bf01">Shopkeeper:     Good afternoon, how can  I help you?</span>&#xa0;<span class ="fa fa-volume-up fa-volume-up-dlg"></span> </p>
        <p class="dlg_content eng_dlg"><span class="dlg_text">สวัสดีตอนบ่าย,มีอะไรให้ฉันช่วยไหม?</span></p>
         ...
</div></div>

js code

jQuery.noConflict();
jQuery(document).ready(function() {  
jQuery("div#dlg_container").on("click",function (evnt) {
      var elementId = evnt.target.id,
        pathVar = document.getElementById("pathVar").innerHTML,
        oggVar = pathVar+elementId+".ogg",
        mp3Var = pathVar+elementId+".mp3",
        audioElement = document.createElement("audio");
      audioElement.src = Modernizr.audio.ogg ? oggVar : mp3Var;
      audioElement.load();
      audioElement.play();
  });
});

Firebug shows that the elementId variable is nil, whereas it should contain, in example above, "bf01". I can't see why this is the case as similar code elsewhere works. I guess I'm missing something obvious here. Thanks in advance for any help.