javascript - Chrome だけで javascript の「onclick」イベントが失敗する

Question

バグのある Web ページを修正していて、どこにバグがあるかはわかりましたが、根拠がわかりません。

この js は、Firefox とエクスプローラーでは完全に機能しますが、Chrome では機能しません。

それで、ここに行きます：

--HTML--

<div id='mesa' onclick='gotoSection( mesa  )' >

--JAVASCRIPT--

<script type="text/javascript"> 
    function gotoSection( section ){
        alert( section );
        $( '#section_container div' ).css( "display" , "none" );
        $( section ).css( "display" , "block" );
    }
</script>

--

そのため、Firefox では "[object HTMLDivElement]" というアラートが表示されますが、Chrome では "undefined" というアラートが表示されます。

Answer 1

変化する

<div id='mesa' onclick='gotoSection( mesa  )' >

に

<div id='mesa' onclick='gotoSection( this  )' >

jQueryを使用する場合、これはより慣用的であることに注意してください（このコード行を実行する前に要素を定義する必要があります）：

$('#mesa').on('click', gotoSection);

---

編集 ：

あなたのコメントに続いて、あなたのバグが複数の要素に同じ id を与えたことであることは明らかです。それは違法であり、ブラウザが何であれ、どの要素で を使用するかという保証はありません$('#mesa')。

たとえば、解決策は次のとおりです。

<div id=mesaOpener> ... </div>
<div id=anotherDivOpener> ... </div>

 <div id=mesa> ... </div>
<div id=anotherDiv> ... </div>

<script type="text/javascript">
  $(function(){
    $('[id$=Opener]').on('click', function(){
        $('#section_container div' ).hide();
        $('#'+this.id.slice(0,4)).show();
    });
  });
</script>

をクリックすると<somename>Openerdiv が表示されます<somename>。

Answer 2

試す

<div id='mesa' onclick='gotoSection( "#mesa" )' >

Answer 3

文字列をメサにするべきではありませんか？つまり onclick='gotoSection("mesa")'