なぜ私のjは不適切なhtmlで異なって実行されますか？

私は、jQuery、ブートストラップ、および2種類のjQueryプラグインを使用してWebページを作成しています。 1つはTurn.jsと呼ばれ、もう1つはmCustomScrollbarと呼ばれます。今日までは、すべてのリクエストに<!DOCTYPE html>タグの前にスクリプトタグを付加するサーバーサイドコードがありました。別のページで、$(window).height()を使用しているときにjQueryが不適切な高さで問題を引き起こしていたことに気が付いたので、コードを修正して、</body>タグの直前にスクリプトタグを入れる方法を考え出しました。これは私が使用しているmCustomScrollBarライブラリの機能を壊していますなぜ私のjは不適切なhtmlで異なって実行されますか？

何らかの理由でスクロールバーが表示されず、マウスホイールの機能が無効になり、モバイル/タッチデバイスでスクロールが無効になります。プラグインは、htmlがプラグインによって変更されるのを見ることができるので、確実に発砲しています。

JavaScriptが正しく動作する理由、または不適切なhtmlがあるのに、マークアップが修正されたとき正しく動作しない（少なくとも<!DOCTYPE html>タグの前にはテキストなし）？

関連するコード：

HTML構造IはにmCustomScrollbarプラグインを適用しています。 #flip-indesの親は、ページのメインコンテナであるブートストラップ.container-fluidを分割します。私は私の意見に剃刀構文でC＃を使用しています。必要に応じて、生成されたhtmlのページを投稿できます。

<div id="flip-index"> 
    <div class="customScrollbar"> 
     @for (var i = 0; i < Model.Pages.Count; ++i) 
     { 
      <div class="index-item" onclick="$('#flipbook').turn('page', @(i + 1));"> 
       <img src="@Config.Get("FlipbookImgURL")@Model.Pages[i].Replace('\\', '/')" alt="Flipbook index preview" onerror="replaceWithText(event);"/> 
       <a class="btn btn-primary full-size-img" href="/FlipBook/[email protected]("FlipbookImgURL")@Model.Pages[i].Replace('\\', '/')" target="_blank" title="View Image Full Size"> 
        <span class="glyphicon glyphicon-eye-open"></span> 
       </a> 
       <div class="index-number">@(i + 1)</div> 
      </div> 
     } 
     <div class="index-pad">&nbsp;</div> 
    </div> 
</div>

マイ$(document).ready()

try 
{ 
    $('.index-item:first-child').addClass('active'); 
    var turnOptions = {}; 
    var width = screenWidth(); 
    $('.main-content').css('padding-top', $('nav.navbar').outerHeight()) 
    $('#flipbook').turn(turnOptions); 
    var firstImage = $('#flipbook img')[0]; 
    if (firstImage.complete || firstImage.naturalHeight > 0) { 
     sizeElements(); 
    } else { 
     firstImage.onload = sizeElements; 
    } 
    $('.customScrollbar').mCustomScrollbar({ 
     theme: 'minimal-light', 
     axis: 'y', 
     mouseWheel: { 
      scrollAmount: ($('#flip-index').outerHeight() * (1/$('.index-item').length)) * 2 
     } 
    }); 

    $('#flip-index').css({ 
     left: parseInt($('.main-content').css('padding-left')) 
    }); 

    // Keep the sidebar and the flipper in sync. 
    $('#flipbook').on('turning', pageTurning); 
    window.addEventListener('resize', windowResize); 

    $('#otherInserts .active, #otherInserts .disabled').on('click', function (e) { 
     e.preventDefault(); 
     e.stopImmediatePropagation(); 
    }); 
} 
catch(ex) 
{ 
    alert('There was an error loading this page!'); 
    throw ex; 
} 
finally 
{ 
    // remove loading overlay 
    $('.loading-overlay').fadeOut(function() { 
     $('.loading-overlay').remove(); 
    }); 
}

あり、私はこのページに持って全体の多くのjsがあるが、それのどれもmCustomScrollbarプラグインを参照していないので、「私はそれが関連するとは思わなかった、と私はドン不必要な情報を誰にも過負荷にしたくない。誰かがもっとコードを投稿したいのなら、私はそれをしてうれしいです、ちょうだく聞いてください。

答えは、ブラウザがHTMLを検証できるかどうかに基づいて、ブラウザが私のjsまたはhtmlマークアップを解釈する方法のどこかにあると考えています。

出典

2016-06-17 Andrew Bonsall