jQuery remove/hide element

Question

У меня есть тэг select, когда его значение изменяется, я хочу получить некоторые данные из базы данных в соответствии с этим новым значением, а затем поместить эти новые данные в новый div, этот div содержит знак «close», когда пользователь нажимает на него, новый div скроется, я сделал это с помощью jquery, все работает хорошо, кроме скрытия нового div, мой jQuery для закрытия нового div работает хорошо, но теперь нет, я не думаю, что я сделал неправильно в JQuery, но я не знаю, где моя ошибка, что у мне помочь пожалуйста

JQuery код

$(document).ready(function(){ 
$("#aqIoQuesSelector").on("change",function(){ 
     var IO = $("#aqIoQuesSelector").val(); 
     $("#aqSugInfo").html('<div class="closeSign1"></div>'); 
     $.getJSON("http://localhost/Mar7ba/InformationObject/giveContenfForIO/"+IO+"/TRUE",function(data){ 
      if(data.length>0){ 
       $("#aqSugInfo").css("text-align","right"); 
       for(var i=0;i<data.length;i++){ 
        $("#aqSugInfo").append('<p><span class="aqoneContenSug">'+data[i]+'</span></p>'); 
       } 
      }else{ 
       $("#aqSugInfo").append('<span class="successMessage">no suggesiont</span>'); 
      } 
      $("#aqSugInfo").css("display","block"); 
     }); 
    }); 
}); 

$(document).ready(function(){ 
    $('.closeSign1').on('click', function() { 
     $(this).parent().hide(); 
    }); 
}); 

$ HTML код #

<div id="addQuestion1" class="container"> 
    <ul> 
     <li> 
      <label class="Paragraph">Question</label> 
      <p> 
       <label>Text</label> 
       <input id="aqQuestionText"type="text" class="longInput1"/> 
      </p> 
      <p> 
       <label>Answer</label> 
       <input id="aqQuestionAnswer"type="text" class="longInput1"/> 
      </p> 
      <p> 
       <label>Is Existed ?</label> 
       <input type="button" value="check" class="button1" id="aqQuestionSug"/> 
      </p> 
      <div id="aqSugQues" class="SuggestionsContainer"> 
       <div class="closeSign1"></div> 
      </div> 
     </li> 
     <li> 
      <p><label class="Paragraph">Choices</label></p> 
      <p> 
       <label>First Choice</label> 
       <input type="text" class="longInput1" name="choice1"/> 
      </p> 
      <p> 
       <label>Second Choice</label> 
       <input type="text" class="longInput1" name="choice2"/> 
      </p> 
      <p> 
       <label>Third Choice</label> 
       <input type="text" class="longInput1" name="choice3"/> 
      </p> 
     </li> 
     <li id="aqQuestionIoli"> 
      <label class="Paragraph">Question IO</label> 
      <p> 
       <label>Concept</label> 
       <select class="ConceptSelector1"></select> 
      </p> 
      <p> 
       <label>IO</label> 
       <select id="aqIoQuesSelector"></select> 
      </p> 
      <p> 
       <label>Info</label> 
       <input type="text" class="longInput1"/> 
      </p> 
      <div id="aqSugInfo" class="SuggestionsContainer"> 
       <div class="closeSign1"></div> 
      </div> 
     </li> 
     <li id="aqAnswerIoli"> 
      <label class="Paragraph">Answer IO</label> 
      <p> 
       <label>Concept</label> 
       <select class="ConceptSelector1"></select> 
      </p> 
      <p> 
       <label>IO</label> 
       <select id="aqIoAnswerSelector"></select> 
      </p> 
     </li> 
     <li> 
      <label class="Paragraph">Hints</label> 
      <p> 
       <label>First Hint</label> 
       <input type="text" class="longInput1"/> 
      </p> 
      <p> 
       <label>Second Hint</label> 
       <input type="text" class="longInput1"/> 
      </p> 
      <div id="aqSugHints" class="SuggestionsContainer"> 
       <div class="closeSign1"></div> 
      </div> 
     </li> 
     <li> 
      <label>Type</label> 
      <select class="TypeSelector"></select> 
     </li> 
     <li> 
      <input type="submit" value="save" class="button1"/> 
     </li> 
    </ul> 
</div> 

уведомления о том, что знак близко используются три раза здесь, он работает в первый раз в DIV aqSugQues, но не работает в DIV aqSugInfo ни DIV aqSugHints

на основе AJAX работает хорошо, и я распечатать результаты

благодарит за помощь

Answer 1

Эта линия:

$("#aqSugInfo").html('<div class="closeSign1"></div>'); 

заменяет содержимое DIV с новой кнопкой, которая не имеет щелчок-событие неизбежно, поэтому каждый раз при обновлении, что кнопка потеряет свою силу.

Вы можете попробовать обертывание динамического содержимого в контейнере, который можно легко удалить, или сделать что-то вроде

$("#aqSugInfo").children(':not(.closeSign1)').remove(); 

Answer 2

Если это $("#aqSugInfo"), вы хотите скрыть, почему бы не сказать об этом в коде? $("#aqSugInfo").hide();?