Script não funciona após requisição via ajax
Estou tentando entender um problema e como resolvê-lo. Após incluir (via ajax) uma div na página principal, o script destinado à manipulação da div que foi incluída não funciona.
Tenho uma página principal chamada teste_ajax.php:
<html>
<head>
<title>Teste</title>
<link rel="stylesheet" type="text/css" href="css/estilo.css">
<script type="text/javascript" src="//code.jquery.com/jquery-2.1.4.min.js"></script>
<script type="text/javascript" src="scripts/regra.js"></script>
</head>
<body>
<p>Abrir</p>
<div id="geral">
</div>
</body>
</html>Ao clicar no parágrafo "abrir", lá no arquivo externo de script que foi linkado à página principal, é feita uma requisição via ajax na página chama_div.php para incluir uma outra div (id=centro) dentro da div#geral (localizada na página principal).
chama_div.php:
<?php
Extract($_POST);
if($funcao == "ChamaDiv"){
?>
<div id="centro"></div>
<?php
}
?>regra.js:
$(document).ready(function() {
$('p').click(function() {
$.ajax({
type: "POST",
url: "chama_div.php",
data: {
funcao: "ChamaDiv"
},
success: function(data) {
$('#geral').html(data);
}
});
$("#centro").css('border', '1px solid #000');
});
});Como visto no script acima, após incluir a div#centro na página principal via ajax, tento adicionar uma borda na div#centro. Entretanto, não obtive êxito.
O exemplo está disponível em: http://diogojeferson.esy.es/teste_ajax.php
Alguém pode me ajudar a resolver isso?
Discussão (2)
Carregando comentários...