jQuery .preventDefault();答案

【问题标题】：jQuery .preventDefault();jQuery .preventDefault();
【发布时间】：2012-01-04 16:45:37
【问题描述】：

我有 2 个 jQuery 脚本 - 一个在我添加 .preventDefault 之前，在我添加 .preventDefault 之后有一个相同脚本的副本。 jQuery 在初始时有效，但在我添加 .preventDefault()

后无效

有效的初始脚本

$(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

脚本不起作用...

$(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

我所做的唯一更改是最初的 if 语句变成了调用 .preventDefault() 的 if/else。第一个脚本效果很好，但第二个脚本失败了。为什么？如果organizationElement 的值是现有记录上的idk，我将调用.preventDefault() 方法。

@Andrew：澄清您的编辑...我应该将我的脚本修改为： ...

   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 我注意到如果我更改 $(this).preventDefault(); 它将正常工作到 e.preventDefault();

如果我希望将方法附加到 $(this) 对象，就像我最初编写的那样，您是否想展示如何编写它？

【问题讨论】：

标签： jquery preventdefault

【解决方案1】：

您想在事件对象上调用preventDefault，而不是this

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

为了完整起见，请注意preventDefault 阻止了此元素的默认操作——例如，将页面导航到锚的 href 属性值（我不确定默认操作是针对选择的焦点，或者即使有）。 preventDefault 不防止冒泡。

如果你碰巧关心冒泡——我并不是说你一定应该这样做——从 jQuery 事件处理程序返回 false 既可以防止默认操作，也可以防止冒泡。

【讨论】：

谢谢亚当。我知道 preventDefault 不会阻止事件冒泡，但是我不确定我是否不希望冒泡。这可能是阻止整个 jQuery 脚本工作的原因吗？
@jg100309 - 不，您最初的问题是您在此调用 preventDefault 而不是事件对象。将事件对象传递给您的处理程序，并在 it 上调用 preventDefault，就像在我的回答中一样
旁注：如果' 位于两个"s 之间，则不必转义它。

【解决方案2】：

preventDefault() 函数与事件相关联。您应该调用的是：

e.preventDefault();

编辑根据您的评论澄清，您需要在函数调用中添加e作为变量：

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

您可以在jQuery preventDefault 页面上阅读更多信息。

【讨论】：

好的，所以它总是 e.preventDefault();

【解决方案3】：

preventDefault 方法应该应用于事件对象，而不是你正在执行的 DOM 对象。

你的代码应该是：

$("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

如果有帮助，请告诉我！

【讨论】：