javascript - how do i capture which number <div> got clicked on inside my container <div> and store it in a variable -
edit: code held inside $(document).ready(function() {}
because of this, , because html code generated inside javascript file on fly, experiencing issues using .click()
when applying answer given use
$('.movies_cell').click(function(){ var tmp = $(this).index(); });
original: have 20 div elements on page class of .movies_cell generated ajax file. of div's created within container div called #movies.
any of .movies_cell div's can clicked bring modal box, because going place information json file in modal depending on gets clicked need know div got clicked, instance, if 5th div want know 5th div clicked , store number in variable, if 2nd, or 3rd want number stored in variable , clear when .movies_cell div gets clicked.
how write javascript or jquery script accomplish this? :(
thanks!
$('#mymovies').click(function () { $.getjson('data/movies.json', function (alldata) { $.each(alldata, function (i, field) { $('#movies').append(function () { var movies = '<div class="movies_cell">'; movies += '<div class="movies_image">'; movies += '<a href="#openmodal"><img src="img/movies/' + (field.image) + '" alt="' + (field.name) + ' poster" style="width: 100%; height: 100%"></a>'; movies += '</div>'; movies += '<div class="movies_detail">'; movies += '<a href="#openmodal"><h1>' + (field.name) + '</h1></a>'; movies += '<img src="img/rating/' + (field.myrating) + '.png" alt="movie rating" style="margin: auto;">'; movies += '</div>'; movies += '</div>'; counter++; console.log(counter); return movies; }); }); }); });
use event delegation.(https://api.jquery.com/on#direct-and-delegated-events) @ top
$('#movies').on( "click", ".movies_cell > div", function() { var tmp = $(".movies_cell > div").index(this); console.log(tmp); });
then
$('#mymovies').click(function () { //rest of code
Comments
Post a Comment