0
我有以下的HTML和JavaScript。當我點擊有鏈接的.todo和.completedmsg時，我期待event.preventDefault（）。但它跳轉到鏈接。event.preventDefault（）用。對（「點擊」）不會阻止默認行爲
$("#form").on('click',".todo", function(event){...}
$("#form").on('click','.completedmsg', function(event){...}
我在做什麼錯在這裏？
在此先感謝。
HTML所有
<div id="homeright" class="adminhome">
<form method="post" id="form" action="admin/insertShoutBox">
<input type="hidden" name="user_id" id="user_id" value="1">
<input type="hidden" name="user" id="nick" value="admin">
<p class="messagelabel"><label class="messagelabel">Message</label>
<textarea id="message" name="message" rows="2" cols="80"></textarea>
</p>
<div class="buttons">
<button type="submit" class="positive" name="submit" value="submit">
<img src="http://localhost/website2014/assets/icons/disk.png" alt="disk"> Save </button>
</div>
</form>
<div id="loading" style="display: none;"><img src="../../assets/images/general/ajax-loader2.gif" alt="Loading now. Smile"></div>
<div class="clearboth"></div>
<div id="container">
<span class="clear"></span>
<div class="content">
<h1>Latest Messages or Task To Do</h1>
<ul id="message_ul" style="display: block;">
<li class="1">
<div class="listbox"><span class="user"><strong>admin</strong></span>
<span class="date">2014-03-28 17:25:50</span>
<a href="http://localhost/website2014/index.php/messages/admin/changestatus/1" class="todo">to do</a><span class="msg">test</span></div></li></ul>
</div>
</div>
<div id="completed">
<h1>Completed Lists</h1>
<ul id="completed_ul" style="display: block;">
<li class="2">
<span class="user"><strong>admin</strong></span>
<span class="date">2014-03-28 18:11:29</span>
<a href="http://localhost/website2014/index.php/messages/admin/changestatus/2" class="completedmsg">completed</a>
<a href="http://localhost/website2014/index.php/messages/admin/delete/2" id="2" class="delete">x</a><span class="msg">another test
</span>
</li></ul>
</div>
</div>
jQuery的所有
$(document).ready(function(){
//global vars
var inputUser = $("#nick");
var inputMessage = $("#message");
var loading = $("#loading");
var messageList = $("#message_ul");
var completedmsg = $("#completed");
var completedList = $("#completed_ul");
//Load for the first time the shoutbox data
updateShoutbox();
updateCompletedbox();
function updateShoutbox()
{
//just for the fade effect
messageList.hide();
loading.fadeIn();
//send the post to shoutbox.php
$.ajax({
type: "POST",
url: "<?php echo site_url('messages/admin/AjaxgetShoutBox'); ?>",
complete: function(data)
{
loading.fadeOut();
messageList.html(data.responseText);
messageList.fadeIn(500);
//completedList.fadeIn(500);
}
});
}
function updateCompletedbox()
{
//just for the fade effect
completedList.hide();
loading.fadeIn();
//send the post to shoutbox.php
$.ajax({
type: "POST",
url: "<?php echo site_url('messages/admin/AjaxgetCompletedBox'); ?>",
complete: function(data)
{
loading.fadeOut();
completedList.html(data.responseText);
// messageList.fadeIn(500);
completedList.fadeIn(500);
}
});
}
//check if all fields are filled
function checkForm()
{
if(inputUser.val() && inputMessage.val())
{
return true;
}
else
{
return false;
}
}
//on submit event
$("#form").submit(function(event){
event.preventDefault();
if(checkForm())
{
var nick = inputUser.attr("value");
var message = inputMessage.attr("value");
//we deactivate submit button while sending
$("#send").attr({ disabled:true, value:"Sending..." });
$("#send").blur();
//send the post to shoutbox.php
$.ajax({
type: "POST",
url: "<?php echo site_url('messages/admin/insertShoutBox'); ?>",
data: $('#form').serialize(),
complete: function(data)
{
messageList.html(data.responseText);
updateShoutbox();
$('#message').val('');
//reactivate the send button
$("#send").attr({ disabled:false, value:"SUBMIT !" });
}
});
}
else alert("Please fill all fields!");
//we prevent the refresh of the page after submitting the form
return false;
});
//on todo event. this changes the status to compeleted
$("#form").on('click',".todo", function(event){
event.preventDefault();
loading.fadeIn();
var href = $(this).attr("href");
var msgContainer = $(this).closest('li');
$.ajax({
type: "POST",
url: href,
cache: false,
complete: function()
{
msgContainer.slideUp('slow', function() {$(this).remove();});
updateShoutbox();
updateCompletedbox();
loading.fadeOut();
}
});
});
// on complete event. this changes the status to todo
$("#form").on('click','.completedmsg', function(event){
event.preventDefault();
loading.fadeIn();
var href = $(this).attr("href");
var CompMsgContainer = $(this).closest('li');
$.ajax({
type: "POST",
url: href,
cache: false,
complete: function(){
CompMsgContainer.slideUp('slow', function() {$(this).remove();});
updateShoutbox();
updateCompletedbox();
loading.fadeOut();
}
});
});
$("#form").on('click','.delete',function(event){
event.preventDefault();
// alert ('clicked');
loading.fadeIn();
var href = $(this).attr("href");
var commentContainer = $(this).parent();
var id = $(this).attr("id");
$.ajax({
type: "POST",
url: href,
cache: false,
complete: function()
{
commentContainer.slideUp('slow', function() {$(this).remove();});
updateShoutbox();
updateCompletedbox();
loading.fadeOut();
}
});
});
});
嘗試使用event.stopPropagation（） – Manoj
@Manoj - 這不會在這個特殊的情況下幫助，爲當前選擇的元素集沒有按不包括OP想要陷入的鏈接。此外，preventDefault應該是'這個工作的正確工具'嗎？我不明白你爲什麼要使用stopPropagation或天堂禁止，返回false; （哎呀） – SpaceBison