Question

我正在创建一个网站，为每个搜索结果生成一个新Div。我在每个搜索结果中都包含一个复选标记并删除了glyphicon，并希望该搜索结果在单击删除图标时淡出。出于某种原因，我的下面的代码不起作用。有任何想法吗？（我所指的点击功能是脚本中的最后一个）

    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');
})

jQuery单击函数不会在前置元素上触发

0 个答案: