jQuery脚本在ASP.NET MVC中不起作用

Question

I want a button to handle a certain JQuery function, but it is not doing anything.

The script inside my .cshtml file:

<script src="~/lib/jquery/dist/jquery.min.js">
    jQuery(function ($) {
        $('#swapHeart').on('click', function () {
            var $el = $(this),
                textNode = this.lastChild;
            $el.find('span').toggleClass('glyphicon-heart glyphicon-heart-empty');
            $el.toggleClass('swap');
        });
    });
</script>

and the button in my .cshtml file:

<button id="swapHeart" class="btn btn-default swap">
    <span class="glyphicon glyphicon-heart-empty"></span>
</button>

Why is this not working? Thanks in advance. EDIT: It does work in this codepen I created: https://codepen.io/floorvrmt/pen/qQPEKQ

Answer 1

Your code using the same script tag which is used to load the source of jQuery. Check the code below, in which I load the source and script

<script src="~/lib/jquery/dist/jquery.min.js">
</script>
<script>
    jQuery(function ($) {
        $('#swapHeart').on('click', function () {
            var $el = $(this),
                textNode = this.lastChild;
            $el.find('span').toggleClass('glyphicon-heart glyphicon-heart-empty');
            $el.toggleClass('swap');
        });
    });
</script>