遺漏的類型錯誤：未定義

Question

我一個網頁，我需要顯示在改變選擇下拉值的引導模式上工作的無法讀取屬性「scrollTop的」。

這是選擇下拉菜單中更改事件的代碼。

$('#joinb').change(function(){ 
    switch ($('#joinb')[0].selectedIndex) { 
     case 3: 
      header_modal = 'Joining Scyon Stria cladding on stud with vertical flashing'; 
      img_src = "/_mockups/boot_calcs/img/onflash.jpg"; 
      text_modal = 'This will calculate Stria vertical flashing for all walls greater than 4.2m in length. You can add additional Stria vertical flashing in step 5'; 
      break; 
     case 2: 
      header_modal = 'Joining Scyon Stria cladding on stud with sealant'; 
      img_src = "/_mockups/boot_calcs/img/onsealant.jpg"; 
      text_modal = 'Boards will be joined on stud with sealant only. No Stria vertical flashing stop will be calculated for this option. This must be calculated in step 5 or select joining board option: On stud vertical flashing option in step 1'; 
      break; 
     case 1: 
      header_modal = 'Joining Scyon Stria cladding off stud'; 
      img_src = "/_mockups/boot_calcs/img/off-stud.jpg"; 
      text_modal = ''; 
      break; 
    }   
    $('#myModalLabel').html(header_modal); 
    $('#modalImg').attr('src',img_src); 
    $('#modalText').html(text_modal); 
    $('#myModal').modal() //The error occurs at this line. 
}); 

我已經包含了js/bootstrap.min.js，並且在vendor/js/bootstrap.min.js中有另一個文件。

現在，當我改變我的HTML頁面中選擇選項的值有一些看不見的彈出窗口，彈出並阻止整個屏幕。最終，除了重新加載頁面之外，我沒有別的選擇。

當我改變選擇的價值我遇到Web瀏覽器控制檯上Uncaught TypeError: Cannot read property 'scrollTop' of undefined錯誤。

我已經工作了，因爲兩天的時間解決這個問題，但我不能找到哪裏是'scrollTop的財產，什麼原因造成的問題？

請幫我出這一點。我嘗試了很多可能性，但無法解決問題。

Answer 1

這應該讓你在那裏。沒有你的HTML我不能重現你的「滾動頂部」問題。

$(document).ready(function() { 
 

 
    $('#select_dropdown').change(function() { 
 

 
    var dropVal = $('#select_dropdown').val(); 
 
    var header_modal = ''; 
 
    var img_src = ''; 
 

 
    if (dropVal == 1) { 
 
     header_modal = 'Joining Scyon Stria cladding off stud'; 
 
     img_src = "/_mockups/boot_calcs/img/off-stud.jpg"; 
 
     text_modal = ''; 
 
    } else if (dropVal == 2) { 
 
     header_modal = 'Joining Scyon Stria cladding on stud with sealant'; 
 
     img_src = "/_mockups/boot_calcs/img/onsealant.jpg"; 
 
     text_modal = 'Boards will be joined on stud with sealant only. No Stria vertical flashing stop will be calculated for this option. This must be calculated in step 5 or select joining board option: On stud vertical flashing option in step 1'; 
 
    } else if (dropVal == 3) { 
 
     header_modal = 'Joining Scyon Stria cladding on stud with vertical flashing'; 
 
     img_src = "/_mockups/boot_calcs/img/onflash.jpg"; 
 
     text_modal = 'This will calculate Stria vertical flashing for all walls greater than 4.2m in length. You can add additional Stria vertical flashing in step 5'; 
 
    } 
 

 
    $('#myModalLabel').html(header_modal); 
 
    $('#modalImg').attr('src', img_src); 
 
    $('#modalText').html(text_modal); 
 
    $('#myModal').modal() //The error occurs at this line. 
 

 
    return; 
 
    }); 
 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 

 
<!-- Latest compiled and minified CSS --> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"> 
 

 
<!-- Optional theme --> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous"> 
 

 
<!-- Latest compiled and minified JavaScript --> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script> 
 

 
<div id="test">TEST</div> 
 

 

 
<select id="select_dropdown" class="form-control"> 
 
    <option>--Select an option--</option> 
 
    <option>1</option> 
 
    <option>2</option> 
 
    <option>3</option> 
 
</select> 
 

 
<br> 
 

 
<!-- Button trigger modal --> 
 
<!-- 
 
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal"> 
 
    Launch demo modal 
 
</button> 
 
--> 
 

 

 
<!-- Modal --> 
 
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> 
 
    <div class="modal-dialog" role="document"> 
 
    <div class="modal-content"> 
 
     <div class="modal-header"> 
 
     <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span> 
 
     </button> 
 
     <h4 class="modal-title" id="myModalLabel">Modal title</h4> 
 
     </div> 
 
     <div class="modal-body" id="modalText"> 
 
     ... 
 
     </div> 
 
     <div class="modal-footer"> 
 
     <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
 
     <button type="button" class="btn btn-primary">Save changes</button> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>