CODEWITHSUNDEEP
jqueryhtmljson
Arianule
Arianule

Reputation: 9043

click event of my jquery not firing

I am saving an xml file into a json object and then looping through the titles to display it in a container and then I try to click on the title but nothing happens.

$(document).ready(function() {
$.get("Titles.xml", function(data, status) {
    var jsonObj = $.xml2json(data);
    $("#videoListTmpl").tmpl(jsonObj).appendTo("#titlesContainer");
});

$(".videoItem").on('click', function() {
    console.log("this is the click");
});

Html file.

<body>
<div id="container" style="margin-right: auto;margin-left: auto;width:960px;clear:both">
<div style="margin:0 auto;width:260px;float:left;height:400px;overflow:scroll" id="titlesContainer"></div>
<div style="margin:0 auto;width:670px;float:right;" id="titleContainer"></div>
</div>
<script id="videoListTmpl" type="text/x-jquery-tmpl">
    {{each Titles}}
        <div class="videoItem" style="cursor:pointer">
            ${titles}
        </div>
    {{/each}}
</script>

Any advice as to why the event is not firing?

Upvotes: 0

Views: 68

Answers (1)

bipen
bipen

Reputation: 36531

try on delegate..

 $(document).on('click',".videoItem", function() {
    console.log("this is the click");
});

or delegate it to closest parent element that is present in the document...

$("#titlesContainer").on('click',".videoItem", function() {
     console.log("this is the click");
});

go through the link if you want to read more about on events

Upvotes: 2

Related Questions