0

I'm creating a site that generates a new Div for each search result. I include a checkmark and remove glyphicon on each search result, and want that search result to fade out when it's remove icon is clicked. For some reason my below code won't work. Any ideas? (The click function I'm referring to is the last one in the script)

    var search = false;


$("#icon").click(function(){
  $(this).addClass("animated fadeOut");
  $(this).remove();
  $("#helperText").addClass("animated fadeOut")
  $("#helperText").remove();
  $("#searchText").removeClass("hidden",5000, "easeOutElastic");
})

$("#searchText").submit(function(e){
  if (search === true){
    cleanUp();
  }
  e.preventDefault();
  term = $("#input").val();
  getData(term);
  search = true;
})

function divMaker(maker, data, i){
  //pass in an array
  jQuery('<div/>', {
    id: 'foo',
    class: maker,
    href: 'http://google.com',
    title: 'Become a Googler',
    rel: 'external',
    html: "<button class='checkMark'><span class='glyphicon glyphicon-ok'></span></button><a href='"+data[3][i]+ "' target='Blank'><p class='heading'>"+data[1][i] + "</p><p>" + data[2][i]+"</p></a><button class='remove'><span class='glyphicon glyphicon-remove'></span></button>",
}).appendTo('#test');
}

function getData(term){
  URL = "https://en.wikipedia.org/w/api.php?action=opensearch&format=json&search="+term;
  $.ajax( {
      url: URL,
      data: 'queryData',
      dataType: 'jsonp',
      type: 'POST',
      headers: { 'Api-User-Agent': 'Example/1.0' },
      success: function(data) {
            for (i=0; i < 5; i++){
            maker = 'maker text-center animated bounceInUp';
            divMaker(maker,data,i);
            }
      }
  } );
}

function cleanUp(){
  $("#test").empty();
}

$(".remove").on("click",function(){
  $(this).addClass('animated fadeOut');
})
Robert Carroll
  • 73
  • 7
  • 1
    For further reading: https://learn.jquery.com/events/event-delegation/ – Stryner Feb 12 '16 at 22:51
  • 'html' is not a valid property of the 'div' element which is being dynamically created. Could you verify that piece of code even works ? – DinoMyte Feb 12 '16 at 23:07
  • I believe you should append the created element to '#test' and then use .wrap() to append html. Something like this : https://jsfiddle.net/DinoMyte/qgo90beb/2/ – DinoMyte Feb 12 '16 at 23:15

0 Answers0