Почему не выводятся данные после нажатия кнопки?

Question

[None]

Задача: нажимая на кнопку, выводить некоторые данные в консоль браузера

шаблон

<div class="input-group my-3" style="width:30%;">
            <input type="number" value="1" class="" id="productQty"/>

            <div class="input-group-append">
                <input type="hidden" class="product-id" value="{{product.id}}">
                <input type="hidden" class="product-title" value="{{product.name}}">
                <button class="btn btn-primary btn-sm add-to-cart" data-index="{{product.id}}" type="button" id="addToCartbtn"><i class="fa fa-shopping-cart"></i> Add to Cart</button>
            </div>
        </div>

script

$("#addToCartbtn").on('click', function(){
                var _qty=$("#productQty").val();
                var _productId=$(".product-id").val();
                var _productName=$(".product-title").val();

                console.log(_qty,_productId,_productName);

    });

нажимаю на кнопку "добавить в корзину" и абсолютно ничего((

Answer 1

[Stalker_RED]

Работает же
https://jsfiddle.net/8v3qx16r/

Comments

[None]

почему у меня работает только, в теге script?

</section>
<script>
     $("#addToCartbtn").on('click', function(){
                var _qty=$("#productQty").val();
                var _productId=$(".product-id").val();
                var _productName=$(".product-title").val();

                console.log(_qty,_productId,_productName);


    });
</script>
{% endblock%}

если поставлю тег после endblock, то ничего не заработает. в отдельном файле тоже не фурычит.
вот как подключаю файл

<script type="text/javascript" src="{% static 'shop/js/script.js' %}"></script>

[Stalker_RED]

Константин, недостаточно данных для ответа. В качестве предположения - возможно грузит скрипт до появления кнопки в документе.