Как перенести document.ready в файл js?

Question

Я сделал код jquery на странице aspx. Теперь я хочу переместить код в файл Report-Filter.js. Я пытался двигаться и выполнять. Но это не сработает.

Это мой код;

<link href="css/jquery-ui.css" rel="stylesheet" /> 
<script src="js/jquery-3.1.1.js"></script> 
<script src="js/jquery-ui.js"></script> 
<script src="js/Report-Filter.js"></script>  -------> // code 

<script src="js/bootstrap.js"></script> 
<link href="css/bootstrap.css" rel="stylesheet" /> 

<link href="css/ReportsSalesAll-style.css" rel="stylesheet" /> 
<link href="css/Accordian-Hide-Show.css" rel="stylesheet" /> 
<script src="js/Accordian-Hide-Show.js"></script> 


<script type="text/javascript"> 
    $(document).ready(function() { 
     // Moved code to Report-Filter.js file 
    }) 
</script> 

Но я не получил выход. Что я сделал неправильно в своем коде.

Answer 1

Там нет необходимости писать тег сценария в тегах удалить скрипт .js файлов из js файла

<script type="text/javascript"> 
    $(document).ready(function() { 
     // Moved code to Report-Filter.js file 
    }) 
</script> 

Должен быть

$(document).ready(function() { 
    // Moved code to Report-Filter.js file 
}) 

Кроме того, было бы лучше всего, прежде чем поместить link файл close от body tag

Answer 2

Я не совсем уверен, что вы пытаетесь но я собираюсь принять некоторые вещи.

То, что я думаю, что вам нужно, это

• Создайте новый файл и поместить яваскрипт код там с отношениями, что говорит Leopard.
• Ссылка на ваш новый файл javascript в вашем коде, как показано в ответе . Обязательно укажите это ПОСЛЕ того, как вы ссылаетесь на библиотеки JQuery .
• Проверьте свой код. Например, помещая предупреждение в файл Javascript где-нибудь. Например: alert ("test");

Некоторые общие советы:

• всегда ставить ссылки CSS до ссылки JS (предпочтительно в глава документа). Таким образом, страница не будет заикаться визуально во время загрузки, потому что элементы, помещенные на экран, уже будут в стиле.
• Всегда помещайте сценарии, которые вы ссылаетесь ниже своих HTML-элементов. Таким образом, страница не будет занимать слишком много времени, чтобы отобразить, потому что сценарии не заранее загрузить, а потом (что является правильным в любом случае, , потому что ваш код протекании после того, как документ завершения загрузки)

В конце концов это должно выглядеть примерно так:

Javascript файл (JS/новой Javascript-file.js):

$(document).ready(function() { 
    alert("test"); 
}) 

Html CSHtml Aspx файл// (не уверен, что вы используете):

<link href="css/jquery-ui.css" rel="stylesheet" /> 
<link href="css/ReportsSalesAll-style.css" rel="stylesheet" /> 
<link href="css/Accordian-Hide-Show.css" rel="stylesheet" /> 
<link href="css/bootstrap.css" rel="stylesheet" /> 

<script src="js/jquery-3.1.1.js"></script> 
<script src="js/jquery-ui.js"></script> 
<script src="js/Report-Filter.js"></script> 

<script src="js/bootstrap.js"></script> 

<script src="js/Accordian-Hide-Show.js"></script> 
<script src="js/new-javascript-file.js"></script>