web-dev-qa-db-ja.com

jQuery .preventDefault（）;

2つのjQueryスクリプトがあります。1つは.preventDefaultを追加する前で、もう1つは.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になることです。最初のスクリプトはうまく機能しますが、2番目のスクリプトは失敗します。どうして？組織要素の値が既存のレコードの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）オブジェクトにアタッチしたい場合は、おそらくそれを書く方法を示しようとしていますか？

jquerypreventdefault
14
jg100309

イベントオブジェクトでpreventDefaultではなくthisを呼び出したい

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

完全を期すために、preventDefaultはこの要素のデフォルトアクションを防止することに注意してください。ページを、たとえば、アンカー（selectのfocusoutのデフォルトのアクションが何か、またはある場合でもわかりません）。 preventDefaultしないでくださいバブリングを防ぎます。

バブリングが気になる場合（必ずしもそうする必要があるとは限りません）、jQueryイベントハンドラーからfalseを返すと、デフォルトのアクションが防止されるだけでなく、バ​​ブリングも防止されます。

31
Adam Rackis

preventDefault()関数はイベントに関連付けられています。あなたが呼ぶべきものは：

e.preventDefault();

編集 コメントに基づいて明確にするために、関数呼び出しで変数としてeを追加する必要があります。

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

詳細については jQuery preventDefault ページを参照してください。

8
Andrew Jackman

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

それが役立つかどうか教えてください！

4
Deleteman