Заинтересовался jQuery, нашел пример взаимодействия скриптов с PHP, пытаюсь разобраться. PHP форма (без всякой мишуры):
print '
<head>
<meta http-equiv="Content-Type" content="text/html; charset=uft-8" />
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="adddeldata.js"></script>
<body>
<div class="content_wrapper">
<ul id="responds">';
echo '<li id="item_'.$row["id"].'">';
echo '<div class="del_wrapper"><a href="#" class="del_button" id="del-'.$row["id"].'">';
echo 'Удалить нах!';
echo '</a></div>';
echo $row["content"].'</li>';
print '
</ul>
<div class="form_style">
<textarea name="content_txt" id="contentText" cols="45" rows="5"></textarea>
<button id="FormSubmit">Add record</button>
</div>
</div>
</body>';
Файл adddeldata.js
$(document).ready(function() {
$("#FormSubmit").click(function (e) {
e.preventDefault();
if($("#contentText").val()==='')
{
alert("Введите текст!");
return false;
}
var myData = 'content_txt='+ $("#contentText").val(); //build a post data structure
jQuery.ajax({
type: "POST", // HTTP method POST or GET
url: "response.php", //Where to make Ajax calls
dataType:"text", // Data type, HTML, json etc.
data:myData, //Form variables
success:function(response){
$("#responds").append(response);
$("#contentText").val(''); //empty text field on successful
},
error:function (xhr, ajaxOptions, thrownError){
alert(thrownError);
}
});
});
$("body").on("click", "#del .del_button", function(e) {
e.returnValue = false;
var clickedID = this.id.split('-'); //Split string (Split works as PHP explode)
var DbNumberID = clickedID[1]; //and get number from array
var myData = 'recordToDelete='+ DbNumberID; //build a post data structure
jQuery.ajax({
type: "POST", // HTTP method POST or GET
url: "response.php", //Where to make Ajax calls
dataType:"text", // Data type, HTML, json etc.
data:myData, //Form variables
success:function(response){
//on success, hide element user wants to delete.
$('#item_'+DbNumberID).fadeOut("slow");
},
error:function (xhr, ajaxOptions, thrownError){
//On error, we alert user
alert(thrownError);
}
});
});
// для первых трех
$("body").on("click", "#responds .del_button2", function(e) {
$(this).parent('div').parent('li').fadeOut("slow");
});
});
Так вот добавление проходит на "Ура", а удаление не работает. Chrome матюкается на $("body").on("click", "#del .del_button", function(e) {
Говорит, мол, Uncaught TypeError: undefined is not a function...
И извечный вопрос...Что делать?