Я не могу заставить HTML, загруженный через ajax, обновлять DOM. Что я делаю не так?
HTML:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=UTF-8">
<title>Test</title>
<link rel="stylesheet" type="text/css" href="//atpc.info/f/styles.css" media="all">
<link rel="stylesheet" type="text/css" href="//atpc.info/f/form.css" media="all">
<link rel="stylesheet" type="text/css" href="//atpc.info/f/pesquisa.css" media="all">
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script type="text/javascript" src="//atpc.info/f/t/test.js"></script>
</head>
<body>
<form id="form_p" action="">
<fieldset class="p_test">
<legend>Test question text?</legend>
<label for="p_test_y"><input type="radio" id="p_test_y" name="p_test" value="y">Yes!</label>
<label for="p_test_n"><input type="radio" id="p_test_n" name="p_test" value="n">No!</label>
<a class="continue_r">Continue →</a>
</fieldset>
<small id="update_p"></small> <span id="status_p"></span>
</form>
</body>
</html>
JQuery:
$(document).ready(function() {
$('label').css('display','block');
$('a.continue_r').live('click',function(event) {
var id_p=$('input:radio:first').attr('name');
var v_r=$('input:radio:checked').val();
alert(v_r);
$.post(
'test.php',
{ id_p:id_p, v_r:v_r },
function(data){
alert('Retorno:\n' + data);
//$('form').append($(data).hide().fadeIn('slow'));
$('body').append(data);
$('label').css('display','block');
}
);
});
});
PHP:
<?
if(!empty($_REQUEST['id_p'])) $id_p=$_REQUEST['id_p'];
else die('Ops! no id_p');
if(!empty($_REQUEST['v_r'])) $v_r=$_REQUEST['v_r'];
else die('Ops! no v_r');
if($_REQUEST['id_p']=='p_test1') die('Victory!!!');
echo<<<FORM
<fieldset class="p_test1">
<legend>Test 1 question text?</legend>
<small>Last question was $id_p and you option was $v_r</small>
<label for="p_test1_y"><input type="radio" id="p_test1_y" name="p_test1" value="ohy">Oh, Yes!</label>
<label for="p_test1_n"><input type="radio" id="p_test1_n" name="p_test1" value="ohn">Oh, No!</label>
<a class="continue_r">Continue →</a>
</fieldset>
FORM;
?>
Для тех, кто заинтересован, вот окончательный рабочий код JQuery:
$(document).ready(function() {
$('label').css('display','block');
$('a.continue_r').live('click',function(event) {
//var fieldset=$(this).closest('fieldset');
var fieldset=$(this).parent('fieldset');
//alert(fieldset.attr('class'));
//var id_p=$('input:radio').attr('name');
//var id_p=fieldset.attr('class');
var id_p=$('fieldset:last').attr('class');
var v_r=$('input:radio:checked:last').val();
if(v_r=='') v_r=$('textarea:last').val();
fieldset.hide();
//alert('id_p = '+id_p+' - v_r = '+v_r);
$.post(
'test.php',
{ id_p:id_p, v_r:v_r },
function(data){
//alert('Retorn:\n' + data);
$('body').append($(data).hide().fadeIn('slow'));
//$('body').append($(data));
//$('body').append($data);
$('label').css('display','block');
//console.log(data);
}
);
});
});