Вопрос о выпуске JQuery?

В последнее время мой код jQuery с использованием событий перестает работать. Я не понимаю, почему. У меня проблема с объявлением?Вопрос о выпуске JQuery?

Это мое заявление в заголовке:

<head> 
    <meta charset="utf-8"> 

    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 

    <meta name="viewport" content="width=device-width, initial-scale=1"> 

    <meta name="description" content=""> 

    <meta name="author" content=XXXXXXX"> 
    <link href="/Content/bootstrap.css" rel="stylesheet"/> 
    <link href="/Content/Bootstrap-table.css" rel="stylesheet"/> 
    <link href="/Content/site.css" rel="stylesheet"/> 
    <link href="/Content/justified-nav.css" rel="stylesheet"/> 

    <link href="/Content/simple-sidebar.css" rel="stylesheet"> 

    <link rel="stylesheet" type="text/css" href="/Content/msdropdown/dd.css" /> 
    <link href="/Content/font-awesome-4.6.3/css/font-awesome.min.css" rel="stylesheet"> 
    <link href="/Content/font-awesome-4.7.0/css/font-awesome.min.css" rel="stylesheet"> 

    <script src="/Scripts/jquery-3.1.1.js"></script> 

    <script src="/Scripts/jquery-3.1.1.min.js"></script> 
    <script src="/Scripts/bootstrap.js"></script> 
    <script src="/Scripts/Bootstrap-table.js"></script> 
    <script src="/Scripts/ManageSeason.js"></script> 
    <script src="/Scripts/site.js"></script> 
    <script src="/Scripts/modernizr-2.6.2.js"></script> 

    <script src="/Scripts/sidebar_menu.js"></script> 
    <script src="/Scripts/js/msdropdown/jquery.dd.min.js" type="text/javascript"></script> 

    <title>XXXXXX</title> 

</head>

И мой код JQuery:

$('select[class*="selectEqRaceId"]').change(function() { 
    // do some stuff 
});

$('#menu li a').click(
    function() { 
     // Do some stuff 
    } 
);

Это не работает. Я нажимаю на кнопку или изменяю значение опции выбора. Компилятор браузера не входит в эту функцию события.

источник

2016-12-09 Dimitri Idrici

1) Почему вы включая полную версию и уменьшенную версию JQuery? 2) Вы уверены, что ваши функции находятся в 'document.ready()' функции? – TheValyreanGroup

Хорошо, как я понимаю со всеми вашими ответами, все функции, использующие событие, должны быть в документе document.ready(). У меня может быть только 1 document.ready(), поэтому мне нужно использовать document.ready на главной странице? Правильно? –

У вас есть один 'document.ready()' на страницу. И да, все ваши функции jQuery должны быть в этой функции. – TheValyreanGroup

Импорт JQuery только один раз, используйте функцию $(document).ready() и посмотрим на примере ниже.

$(document).ready(function() { 
 
    $('select[class*="selectEqRaceId"]').change(function() { 
 
    console.log("Changed via slect menu"); 
 
    }); 
 

 
    $('button').click(function() { 
 
    console.log("Clicked via button"); 
 
    }); 
 
});

<script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script> 
 
<select class="selectEqRaceId"> 
 
    <option value="1">1</option> 
 
    <option value="2">2</option> 
 
    <option value="3">3</option> 
 
</select> 
 
<br> 
 
<button> 
 
    Click me 
 
</button>

EDIT:
Вы должны поместить метки до событий, получить набор или использовать $ (документ) функции .ready(), который будет выполнять код Thats в нем после завершения загрузки страницы. Всегда полезно использовать функцию $ (document) .ready().

я добавил пример:
1) Скрипт после тегов без $ (документ) .ready()
2) Сценарий перед тегами без $ (документ) .ready() (это не будет работать)
3) Сценарий перед тегами с $ (документ .ready функции)()

<script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script> 
 
<h3>Script after the tags without $(document).ready()</h3> 
 
<select class="afterTheTagsWithReady"> 
 
    <option value="1">1</option> 
 
    <option value="2">2</option> 
 
    <option value="3">3</option> 
 
</select> 
 
<br> 
 
<button class="afterTheTagsWithReady">Click me</button> 
 
<script> 
 
    // Without the $(document).ready() function and after the tags 
 
    $('select.afterTheTagsWithReady').change(function() { 
 
    console.log("Changed via slect menu afterTheTagsWithReady"); 
 
    }); 
 

 
    $('button.afterTheTagsWithReady').click(function() { 
 
    console.log("Clicked via button afterTheTagsWithReady"); 
 
    }); 
 
</script> 
 

 

 

 
<h3>Script before the tags without $(document).ready() (this wont work)</h3> 
 
<script> 
 
    // Without the $(document).ready() function and after the tags 
 
    $('select.beforeTheTags').change(function() { 
 
    console.log("Changed via slect menu beforeTheTags"); 
 
    }); 
 

 
    $('button.beforeTheTags').click(function() { 
 
    console.log("Clicked via button beforeTheTags"); 
 
    }); 
 
</script> 
 
<select class="beforeTheTags"> 
 
    <option value="1">1</option> 
 
    <option value="2">2</option> 
 
    <option value="3">3</option> 
 
</select> 
 
<br> 
 
<button class="beforeTheTags">Click me</button> 
 

 

 

 
<h3>Script before the tags WITH $(document).ready() function</h3> 
 
<script> 
 
    // With the $(document).ready() function and before the tags 
 
    $(document).ready(function() { 
 
    $('select.beforeTheTagsWithReady').change(function() { 
 
     console.log("Changed via slect menu beforeTheTagsWithReady"); 
 
    }); 
 

 
    $('button.beforeTheTagsWithReady').click(function() { 
 
     console.log("Clicked via button beforeTheTagsWithReady"); 
 
    }); 
 
    }); 
 
</script> 
 
<select class="beforeTheTagsWithReady"> 
 
    <option value="1">1</option> 
 
    <option value="2">2</option> 
 
    <option value="3">3</option> 
 
</select> 
 
<br> 
 
<button class="beforeTheTagsWithReady">Click me</button>

источник

2016-12-09 22:29:36 Device

Хорошо, как я понимаю, со всеми вашими ответами, все функции, использующие событие, должны находиться в документе document.ready(). У меня может быть только 1 document.ready(), поэтому мне нужно использовать document.ready на главной странице? Правильно? –

Я отредактировал ответ, взгляните на него. – Device

Короче говоря, да. Поскольку вы загружаете все свои скрипты в элементе head, скрипт выполняется правильно. Он прикрепляет обработчик события ко всем элементам, которые он находит во время загрузки скрипта (который не является ничем, поскольку дерево DOM тела еще не построено).

Вам нужно подождать, пока элементы будут загружены в дерево DOM, прежде чем сможете их обработать, чтобы вы могли исправить это, загрузив код JS непосредственно перед телом закрывающего тега (т. Е. Внутри тела после другие элементы), или вы можете использовать помощник JQuery $().ready(function), чтобы он полностью загрузил дерево DOM, прежде чем пытаться присоединить обработчики событий к элементам.

$().ready(function(){ 
    $('#menu li a').click(function() { 
     //Do some stuff 
    }); 
});

источник

2016-12-09 22:21:35

Хорошо, как я понимаю со всеми вашими ответами, все функции, использующие событие, должны находиться в документе document.ready(). У меня может быть только 1 document.ready(), поэтому мне нужно использовать document.ready на главной странице? Правильно? –

вы можете разместить $(), где угодно. везде, где он загружен, он будет ждать завершения построения дерева DOM. –

ответ

Смежные вопросы