jQuery .preventDefault（）;

Question

I have a 2 jQuery scripts- one before I added .preventDefault, and a copy of the same script after I added the .preventDefault. jQuery works in the initial, but not after I add .preventDefault()

Initial script that works

$(window).load(function(){  
       $(document).ready(function(){  
         $("span[id$='_ff5_1']").each(function() { //returns a collection of elements that must be iterated through using each
            if ($(this).text() == "Yes") { //test value returned from non-input field
                clearID(); 
                $("tr.anon").hide(); 
            } else {
                $("tr.anon").show();
            }   
         });
         if ($("select[title='action']").val() == "") {   
           $("tr.actDet").hide();      
         }
         $("select[title='organizationalElement']").focusout(function() {          
           if ($(this).val() === "I don\'t know") {             
             alert("If no organizational element is selected, additional time may be required to route this request");         
           } // close if    
            $("select[title='action']").change(function(){         
               $(".actDet").toggle($(this).val()!= "");     
            }); // close action.change
        });//close select.focusout
       }); // close doc.ready 
    }); // close window.load 

Script that does not work...

$(window).load(function(){  
   $(document).ready(function(){  
     $("span[id$='_ff5_1']").each(function() { //returns a collection of elements that must be iterated through using each
        if ($(this).text() == "Yes") { //test value returned from non-input field
            clearID(); 
            $("tr.anon").hide(); 
        } else {
            $("tr.anon").show();
        }   
     });
     if ($("select[title='action']").val() == "") {   
       $("tr.actDet").hide();      
     }
     $("select[title='organizationalElement']").focusout(function() {          
       if ($(this).val() !== "I don\'t know") {
         $(this).preventDefault();
       } else {             
         alert("If no organizational element is selected, additional time may be required to route this request");         
       } // close if    
        $("select[title='action']").change(function(){         
           $(".actDet").toggle($(this).val()!= "");     
        }); // close action.change
    });//close select.focusout-- close edit record stuff
   }); // close doc.ready 
}); // close window.load 

The only change I made is the initial if statement becomes an if/else that calls .preventDefault(). The first script works great, but the second script fails. Why? I'm calling the .preventDefault() method if the value of the organizationalElement is idk on an existing record.

@Andrew: To clarify on your edit... Should I revise my script to: ...

   if ($(this).val() !== "I don\'t know") {
     $(this).click( function(e) { e.preventDefault(); } );
   } else {             
     alert("If no organizational element is selected, additional time may be required to route this request");         
   } // close if

... b/c I noted taht it will work correctly if I change $(this).preventDefault(); to e.preventDefault();

Are you perhaps trying to show how to write it if I wish to attach the method to the $(this) object as I'd originally written it?

Answer 1

You want to call preventDefault on the event object, not this

$("select[title='organizationalElement']").focusout(function(e) {          
   if ($(this).val() !== "I don\'t know") {
     e.preventDefault();
   }
});

---

Just for completeness, note that preventDefault prevents the default action of this element—navigating the page to the value of the href attribute for an anchor, for example (I'm not sure what the default action is for a select's focusout, or if there even is one). preventDefault does not prevent bubbling.

If you happen to care about bubbling—and I'm not saying that you necessarily should—returning false from a jQuery event handler will both prevent the default action, and also prevent bubbling.

Answer 2

The preventDefault() function is associated with the event. What you should be calling is:

e.preventDefault();

to clarify based on your comment, you need to add e as a variable in the function call:

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

You can read more about in on the jQuery preventDefault page.

Answer 3

The preventDefault method should be applied to the event object, not to the DOM object as you're doing it.

Your code should be:

$("select[title='organizationalElement']").focusout(function(e) {          
       if ($(this).val() !== "I don\'t know") {
         e.preventDefault();
       } else {             
         alert("If no organizational element is selected, additional time may be required to route this request");         
       } // close if    
        $("select[title='action']").change(function(){         
           $(".actDet").toggle($(this).val()!= "");     
        }); // close action.change
    });//close select.focusout-- close edit record stuff

Let me know if that helps!