0

I have an Ajax call that returns an array of movie titles. I'd like to click on a button next to each title and add the title to a "currently watching" list. My "add" link doesn't seem to be accepting the event handler. What can I do to add the specified title to my "currently watching" list

$("#search").click(function(event){ event.preventDefault();
   var show = $("#showTitle").val().toLowerCase();
   console.log("the show title is " + show);
   var url =  "https://api.themoviedb.org/3/search/movie?query=" + encodeURIComponent(show)+ "&api_key=9b97ec8f92587c3e9a6a21e280bceba5"; 
  console.log(url);

        $.ajax ({
            url: url,
                dataType: "json",
                success: function (data) {
                    // console.log(data.results);
                    var htmlStr = '';
                        $.each(data.results, function(i, results){
                            htmlStr += '<a href="#" class="addCurrentlyWatching">' + 'Add' + '</a> <h2 class="movie-title">' + results.original_title + '</h2>' + "Average Rating " + results.vote_average + '<br>' + '<p class="showDescription">' + results.overview + '</p>' + '<br />' +  '<img src=https://image.tmdb.org/t/p/w185' + results.poster_path + '>';
                        });
                        // console.log(htmlStr);
                        $('#searchresults').html(htmlStr);
            }

            // updateCount(); - count the classes inside the "currentywatching" function

        }); //close .ajax    
    });

    $('.addCurrentlyWatching').on('click', function(e){
        e.preventDefault();
        var movieTitle = $('.movie-title').text();
        // console.log(movieTitle);
        $('.currently-watching').append('<li>' + movieTitle + '</li>');
    });


    <section id = "shelf1">
        <h2> Currently Watching </h2>
            <ul class="currently-watching"></ul>
            <div class="number"> 
                <p> You currently have <span id="count"> 0 </span> shows in this list. </p>

            </div>

    </section>
hs123
  • 1

3 Answers3

0

use

$('body').on('click','.addCurrentlyWatching', function(e){

take a look at Event binding on dynamically created elements?

and in 

<a href="#" class="addCurrentlyWatching">' + 'Add' + '</a>

if you have Add variable defined use

<a href="#" class="addCurrentlyWatching">' + Add + '</a>

if you not

<a href="#" class="addCurrentlyWatching">Add</a>

and you can use

var movieTitle = $(this).next('.movie-title').text();

instead of

var movieTitle = $('.movie-title').text();
Community
  • 1
  • 1
Mohamed-Yousef
  • 23,946
  • 3
  • 19
  • 28
0

The solution:

$(document).on('click','.addCurrentlyWatching', function(e){
    e.preventDefault();
    var movieTitle = $('.movie-title').text();
    // console.log(movieTitle);
    $('.currently-watching').append('<li>' + movieTitle + '</li>');
});

If you are interested in a more detailed answer:

Explanation

Community
  • 1
  • 1
Ferrante
  • 13
  • 4
0

For older versions of jQuery use $.live & $.delegate

Docs:

http://api.jquery.com/live/

http://api.jquery.com/delegate/

Matt Oaxaca
  • 196
  • 1
  • 10