href click event vs. btn click event. Confused?

I'm building a message center. From their inbox, my users can select multiple checkboxes, click the "Delete" button, and selected messages are removed. Works great:

html:

<input type="submit" id="DeleteButton" value="Delete" />

script:

 $('#DeleteButton').click (function() {
 var selected = new Array();
 $("input:checkbox[name=message]:checked").ea开发者_开发技巧ch(function() {
 selected.push($(this).val());
 });
 var selectedString = selected.join(",");
        <cfoutput>$.post("SecComm.cfc?method=deleteMessages&recipientID=#session.ID#", {selected: selected },</cfoutput>
        function(html) {
                        loadMessages();
        });  
    });

The problem I'm having is where I allow users to move messages to any folders they may have set up. I'm using similar script but cannot get it working with the href:

<div class="moveMessages"> 
        <a href="" class="move"  id="7">My new folder</a>
</div>

script:

$('.move').click(function(){ 
 var folderID = $(this).attr('id');                                
 var selected = new Array();
 $("input:checkbox[name=message]:checked").each(function() {
  selected.push($(this).val());
 });
        $.post(
            "SecComm.cfc?method=moveMessage&recipientID=#session.ID#", 
            {messageID: selected },
            {folderID: folderID },
            function() {
                loadMessages();
            });         
    });

I'm sure I'm missing something obvious. Thanks so much for the help.

The href has default functionality that may be conflicting with what you're doing. Make sure you're passing the event object in and then use preventDefault to stop the browser from performing the default functionality of the href.

$('.move').click(function(event){
    event.preventDefault(); 

Things that seem to be wrong:

1. Prevent the default behavior for the event.
2. Pass in the data as one object and not as two separate arguments.

$('.move').click(function( event ){ 
    var folderID = $(this).attr('id');                                
    var selected = new Array();
    $("input:checkbox[name=message]:checked").each(function() {
        selected.push($(this).val());
     });
     $.post(
            "SecComm.cfc?method=moveMessage&recipientID=#session.ID#", 
                { messageID: selected, folderID: folderID }, 
                function() {
                    loadMessages();
               });         
      event.preventDefault();
    });

Id's cannot be just a number.

Use for example id="message-7"

Also see: What are valid values for the id attribute in HTML?

Or in your case it would be better to do:

<a href="" class="move"  data-id="7">My new folder</a>

and access it using:

$('.move').click(function(e){ 
  var folderID = $(this).data('id');     

Also:

add e.preventdefault();

to prevent the hyperlink from navigating away from the page.

$.post method's second argument is data or success handler. You are passing 2 different arguments for data, one for messageID and another for folderID. You should pass a single object with all the data elements in it. Try this

     $.post(
        "SecComm.cfc?method=moveMessage&recipientID=#session.ID#", 
        {messageID: selected, folderID: folderID },
        function() {
            loadMessages();
     });  

Since you have not set anything in the href attribute of anchor it will not appera as a link in FF. Set javascript:void(0) or # at least. If you set #, after clicking on anchor you will the browser will scroll to the top. In order to avoid that you should prevent the default behavior of anchor by calling e.preventDefault() inside anchor click event handler where e is the event object in the handler.

$('.move').click(function(e){ 
   e.preventDefault();
   ...
   ...
});

I'm not sure what your problem is... its not very well described, however from experience and from your mention of the href of the link I would say that your link is propagating... which is "refreshing" the page as it were.

So my answer (unless I get some more information) is to add

return false;

at the end of the click(function(){ }); eg:

$('.move').click(function(){ 
 var folderID = $(this).attr('id');                                
 var selected = new Array();
 $("input:checkbox[name=message]:checked").each(function() {
  selected.push($(this).val());
 });
        $.post(
            "SecComm.cfc?method=moveMessage&recipientID=#session.ID#", 
            {messageID: selected },
            {folderID: folderID },
            function() {
                loadMessages();
            });         
    return false;
});

And that will stop the link from propagating.