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.