CODEWITHSUNDEEP
jqueryaudio
RoyS
RoyS

Reputation: 1489

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.

Upvotes: 0

Views: 44

Answers (3)

Twitch
Twitch

Reputation: 693

Also possible to add onClick() event to the html element so it fires a javascript function:

HTML

<div id="dlg_container" onClick="play_sound('some_defined_event')"></div>

JS function:

function play_sound(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();
};

Related: onclick Event

Upvotes: 0

minion
minion

Reputation: 4353

You are attaching a click event to a parent container, which has many divs with id attribute. So as per your example, if you click on {audio}Buying flowers|dialogs/buying_flowers/buying_flowers.mp3{/audio elementID will be audio_player

Similarly if you click on >Shopkeeper: Good afternoon, how can I help you? elementID will be bf01

So if you want to attach you click event to "bf01" just attach click event to that specific div. 

jQuery("#bf01").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();
  });

Upvotes: 0

Arun P Johny
Arun P Johny

Reputation: 388316

The problem could be that the actual element where the click originated may not have an id. So assuming all the span.dlg_text elements has an id and you want to be able to click anywhere in an p.dlg_content element try

jQuery.noConflict();
jQuery(function ($) {
    $("#dlg_container").on("click", 'p.dlg_content', function (evnt) {
        var elementId = $(this).find('.dlg_text').attr('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();
    });
});

Upvotes: 1

Related Questions