.on（'click'）的event.preventDefault（）不会阻止默认行为

Question

I have the following HTML and javascript. When I click .todo and .completedmsg which have links, I am expecting event.preventDefault(). But it jumps to the link.

$("#form").on('click',".todo", function(event){...}
$("#form").on('click','.completedmsg', function(event){...}

What am I doing wrong here?

HTML all

<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 all

$(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();
    }
    });
  });
});

Answer 1

There are no links inside #form with a class of todo - so the events are not attached to your links:

The .on() method attaches event handlers to the currently selected set of elements in the jQuery object.

The links are outside of the form, so those particular events can't be firing. If the event isn't firing then it makes sense that the links are being 'jumped to' as there's nothing to trap it. If you place a link with the class of .todo inside the form, you will get the desired effect.

As a first test, you could just bind to $(document) instead of #form and check the preventDefault before re-working the HTML so that you can bind to a lower-level element in the DOM (if required...)

Cut-down example of issue: http://jsfiddle.net/YWV9A/1/

Solution: http://jsfiddle.net/YWV9A/3/