Не добавляется value по кнопке, хотя код рабочий? Хотя в песочнице код работает

Question

Не добавляется value по кнопке, хотя код рабочий? Хотя в песочнице код работает

Рейтинг: 0Ответов: 2Опубликовано: 30.01.2023

При нажатии на кнопку, в input должно перейти ее значение. Но этого не происходит

jQuery:

$('button.size').on('click', function() {

    $('#item_size').val($(this).data('value'));

});

HTML:

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head>

    <meta charset="UTF-8">
    <title>Новый</title>

    <script type="text/javascript" src="script/jquery-2.0.0.min.js"></script>
    <script type="text/javascript" src="script/main.js"></script>

</head>
<body>


<div class="sizes">

    <button type="button" class="size" data-value="XS">XS</button>

    <button type="button" class="size" data-value="S">S</button>

    <button type="button" class="size" data-value="M">M</button>

    <button type="button" class="size" data-value="L">XL</button>

    <button type="button" class="size" data-value="XL">L</button>

</div>

<input type="text" name="item_size" id="item_size"/>

</body>
</html>

При нажатии на кнопку текст не отображается в input

javascript html jquery веб-программирование

Источник: Stack Overflow на русском

Answer 1

▲ 1Принят

У вас проблема не в IDE и не в коде, а в том, что ваш скрипт срабатывает быстрее, чем формируется DOM, поэтому на момент выполнения скрипта, элементов $('button.size') не существует.

как решить

Обернем ваш код в функцию

function addListeners() {
  $('button.size').on('click', function() {

    $('#item_size').val($(this).data('value'));

  });
}

и будем вызвать ее после того, как HTML документ полностью сформирован:

<body onload="addListeners()">

И все будет замечательно работать

P.S.: Подтверждение IDEA

Answer 2

▲ 0

Все-таки не заработало, не знаю в чем причина:

function addListeners() {
    $('button.size').on('click', function() {

        $('#item_size').val($(this).data('value'));

    });
}

 <script type="text/javascript" src="script/jquery-2.0.0.min.js">
</script>     
<script type="text/javascript" src="script/main.js"></script>
  </head>
 <body onload="addListeners()">

Не добавляется value по кнопке, хотя код рабочий? Хотя в песочнице код работает

Ответы