Javascript dentro do Ajax não está funcionando

[AnthonyKamers 2]

Estou pegando um dado e dando request por Ajax para colocar o conteúdo em uma div. Porém no arquivo do ajax, eu tenho um javascript que executa a função "leia mais", mas não está funcionando.

 

index.php

echo '
				
				<div class="lightbox" id="lightbox'.$k.'">
				<a href="#_">Fechar</a>
				<div id="content'.$k.'"></div>
				</div>
				
				';
			
			echo '
			<script type="text/javascript">
			
			function showContent'.$k.'(obj){
			var id = obj.getAttribute("class");

			$.ajax({
				type: "GET",
				url: "getContent.php",
				data: { q: id },
			}).done( function( data ) {

				document.getElementById("content'.$k.'").innerHTML = data;
			});
		}
			
			</script>
			';

 

getContent.php

echo '<button>Leia Mais</button>';
echo '<p class="div" style="display:none;">Teste de FadeToggle</p>';

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>

    $("button").click(function(e){
		e.preventDefault();
        $("p").fadeToggle();
    });
</script>

 

Porém o "Teste de FadeToggle" não aparece na div onde deveria aparecer pelo Ajax.

 

Alguém tem alguma ideia do que pode ser o erro??

Desde já agradeço à todos.

[AnthonyKamers 2]

Pessoal, consegui resolver.

 

coloquei no index.php

echo '
			<script type="text/javascript">
			$("#content'.$k.'").on("click", "button", function () {  //use event delegation
			
			$("#content'.$k.' .div").fadeToggle();
			
			});
			</script>
			';

 

Entretanto ele "Toggle/Flash" 3 vezes antes de aparecer totalmente, sabem me dizer o por quê?