href click event vs. btn click event. Confused?

Question

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").each(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.

score 2 · Answer 1 · answered Aug 26 '11 at 16:12

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

score 1 · Answer 2 · edited Aug 26 '11 at 16:28

Things that seem to be wrong:

Prevent the default behavior for the event.
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();
    });

score 0 · Answer 3 · edited May 23 '17 at 09:59

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.

ShankarSangoli · Answer 4 · 2011-08-26T16:18:17.720

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

Thomas Clayson · Answer 5 · 2011-08-26T16:28:53.730

0

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.

edited Aug 26 '11 at 16:28

answered Aug 26 '11 at 16:13

Thomas Clayson

29,657
26
147
224

please note the Rusty's answer doesn't do the same thing. What you are doing is basically: `e.preventDefault()` AND `e.stopPropagation();`. That brings up the following 'flaw' in your answer. 'And that will stop the link from propagating.' Although you are right it's not the propagtion you want to stop here but the default action. – PeeHaa Aug 26 '11 at 16:24
Thank you all. All info was helpful. The "return false" was my first try and resulted in me actually seeing the error. – Kerrie Aug 26 '11 at 16:26
oh right peehaa, never knew that. Whats the difference between preventDefault() and stopPropagation()? I was under the impression they were similar/the same? – Thomas Clayson Aug 26 '11 at 16:30

href click event vs. btn click event. Confused?

5 Answers5