Question

Я просто не могу понять, что я делаю неправильно в коде ниже:

<table width='100%'> 

<script>$("#101m").on("click", function() {alert($(this).text());});</script> 
<tr id='101m'><td class='dayavailible'>A</td></tr> 

<script>$("#101a").on("click", function() {alert($(this).text());});</script> 
<tr id='101a'><td class='dayavailible'>A</td></tr> 

<script>$("#101e").on("click", function() {alert($(this).text());});</script> 
<tr id='101e'><td class='dayavailible'>A</td></tr> 
</table> 

Любая помощь будет оценена.

Answer 1

Ваш скрипт выполнен до загрузки DOM, так что элемент еще не существует, а селектор jQuery не соответствует чему-либо, поэтому никакие элементы не получают привязки к ним. Вы должны вызвать метод init() с помощью $(document).ready().

Нельзя безопасно манипулировать страницей, пока документ не будет готов. jQuery определяет это состояние готовности для вас. Код, включенный внутри $(document).ready(), запускается только после того, как страница Document Object Model (DOM) готова для выполнения кода JavaScript.

$(document).ready(function() { 
    $("#101a").on("click", function() { 
     alert($(this).text()); 
    }); 
}); 

ИЛИ переместите сценарий в конце страницы перед </body> тега.

Answer 2

Ваше событие onclick не может связываться со всеми строками, как в момент возникновения сценария, в HTML не присутствует элемент, поэтому либо переместите код JavaScript после html, либо используйте $(function(){ ... }); DOM Ready.

Хотя я бы предложил вам использовать модульный код, чтобы вам не приходилось писать один и тот же код снова и снова.

<script> 
// DOM Ready 
$(function(){ 
    $("[id*='101']").on("click", function() { 
    alert($(this).text()); 
    }); 
}); 
</script>