我正在摆弄我在网上学到的待办事项列表。尝试添加ajax进去。 当我尝试添加项目时效果很好。添加项目时,会有一个按钮显示“标记为完成”,以便我可以单击它,然后会出现一个“删除”按钮,用于从列表和数据库中删除该项目。
使用ajax添加工作正常,但添加后,如果我单击“标记为完成”按钮,页面将转到done-ajax.php?as=done&item=110
的url
其中 110 只是数据库中项目的 ID。
我必须返回索引页。当我返回索引页面时,该项目将被标记为已完成,因为“标记为完成”有效,但不知何故会转到 URL,而不是停留在索引页面中。
这是发现的问题之一,我不知道在哪里寻找结果。
另一个问题是,如果我添加项目并刷新页面,然后单击“标记为已完成”,它不会转到 url,而是 ajax 可以工作,并且会显示“删除”按钮,但删除按钮会如何显示不工作。我必须刷新页面才能使“删除”按钮与 ajax 配合使用。 我检查了属性并查看了代码,但似乎找不到导致问题的位置。
我的索引代码如下
<div class="list">
<h1 class="header">ET's To do lists.</h1>
<?php if(!empty($items)): ?>
<ul class="items">
<?php foreach($items as $item): ?>
<li>
<span class="item<?php echo $item['done'] ? ' done' : '' ?>">
<?php echo $item['todoText']; ?>
</span>
<?php if($item['done']): ?>
<a href="delete-ajax.php?as=delete&item=<?php echo $item['id']; ?>" class="delete-button">Delete Task</a>
<?php endif; ?>
<?php if(!$item['done']): ?>
<a href="done-ajax.php?as=done&item=<?php echo $item['id']; ?>" class="done-button">Mark as done</a>
<?php endif; ?>
</li>
<?php endforeach; ?>
</ul>
<?php else: ?>
<p class="empty">You haven't added any items yet.</p>
<ul class="items"></ul>
<?php endif ?>
<form class="item-add" action="add.php" method="post">
<input type="text" name="todoText" placeholder="Type a new item here." class="input" autocomplete="off" required>
<input type="submit" value="Add" class="submit">
</form>
</div>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="js/ajax.js"></script>
我的 ajax.js 文件
$(document).ready(function() {
//Action when submit is clicked
$(".submit").click(function(e){
var todoText = $("input[name='todoText']").val();
e.preventDefault();
//Ajax for adding todoText
$.ajax({
method: "POST",
url: "add-ajax.php",
data: {todoText: todoText},
dataType: "json"
})
.done(function(data){
$('p.empty').empty();
$('input.input').val('');
$('ul.items').append('<li>'+todoText+' '+
'<a href="done-ajax.php?as=done&item=' + data.id +
'" class="done-button">Mark as Done</a></li>');
})
});
//Action when done button is clicked
$(".done-button").click(function(e){
e.preventDefault();
//making sure only work with the current element
var $clicked = $(this);
//get the href attribute value and parse it to get the item # which is the item's id
var attrValue = $clicked.attr('href');
var parseAttrValue = attrValue.split('&');
var parseItem = parseAttrValue[1].split('=');
var item = parseItem[1];
//Ajax for Mark as Done Button
$.ajax({
method: "GET",
data:{as: 'done', item: item},
url: "done-ajax.php"
})
.done(function(){
$clicked.prev().addClass('done');
$clicked.removeClass('done-button').empty();
$clicked.addClass('delete-button').text('Delete Task');
$clicked.removeAttr('href');
$clicked.attr('href','delete-ajax.php?as=delete&item='+item);
});
});
//Action when delete button is clicked
$(".delete-button").click(function(e){
e.preventDefault();
//making sure only work with the current element
var $clicked = $(this);
//get the href attribute value and parse it to get the item # which is the item's id
var attrValue = $clicked.attr('href');
var parseAttrValue = attrValue.split('&');
var parseItem = parseAttrValue[1].split('=');
var item = parseItem[1];
//Ajax for Mark as Done Button
$.ajax({
method: "GET",
data:{as: 'delete', item: item},
url: "delete-ajax.php"
})
.done(function(){
$clicked.closest('li').remove();
$clicked.remove();
});
});
});
my done-ajax.php file
<?php
require_once 'app/init.php';
if (isset($_GET['as'], $_GET['item']))
{
$as = $_GET['as'];
$item = $_GET['item'];
switch ($as) {
case 'done':
$doneQuery = $db->prepare("
UPDATE phptodolist_items
SET done = 1
WHERE id = :item
AND user = :user
");
break;
}
}
my delete.php file
<?php
require_once 'app/init.php';
if (isset($_GET['as'], $_GET['item']))
{
$as = $_GET['as'];
$item = $_GET['item'];
switch ($as) {
case 'delete':
$doneQuery = $db->prepare("
DELETE FROM phptodolist_items
WHERE id = :item
AND user = :user
");
break;
}
}
(顺便说一句,感谢之前帮助过 ajax 的一些人) 提前非常感谢大家:D
最佳答案
当页面打开/DOM 准备就绪时,您将在 $(document).ready()
上绑定(bind)事件处理程序。然后,您使用 ajax 添加新项目,但这些项目中的链接不会将事件处理程序绑定(bind)到它们。
您可以使用事件委托(delegate)来确保事件也自动绑定(bind)到新添加的项目。
你可以改变:
$(".delete-button").click(function(e){
e.preventDefault();
...
类似于:
$(".list").on('click', '.delete-button', function(e){
e.preventDefault();
...
其中 $(".list")
可以是包含新添加的元素并且执行此代码时位于页面上的任何元素。
这适用于当 DOM 准备好时您想要绑定(bind)到页面上尚未出现的元素的所有事件处理程序。
关于javascript - 我的“完成”按钮不知何故转到了空白页面,除非刷新 -ajax,否则删除将不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30839763/