Mouseover star icon svg fontawesome

Question

When you hover the mouse on the star icon, the star's class should change, when clicked, it should fix the number of stars. There is an error in the script that does not allow this.

$('.comment-form-stars [data-fa-i2svg]').on('mouseover', function () {
            var onStar = parseInt($(this).data('value'), 10);
            $(this).parent().children('[data-fa-i2svg]').each(function (e) {
                if (e < onStar) {
                    $(this).removeClass('far');
                    $(this).addClass('fas');
                } else {
                    $(this).removeClass('fas');
                    $(this).addClass('far');
                }
            });

        }).on('mouseout', function () {
            if (!ratingVal || ratingVal == 0) {
                $(this).parent().children('[data-fa-i2svg]').each(function (e) {
                    $(this).removeClass('far');
                    $(this).addClass('fas');
                });
            } else {
                $(this).parent().children('[data-fa-i2svg]').each(function (e) {
                    var r = parseInt($(this).data('value'), 10);
                    if (r < ratingVal) {
                        $(this).removeClass('far');
                        $(this).addClass('fas');
                    }
                });
            }
        });

.fa-star {
      color: #f8c31d;
      cursor: pointer;
   }

<link href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://use.fontawesome.com/releases/v5.7.2/js/all.js"></script>
<div class="comment-form-stars">
              <i class="fas fa-star" aria-hidden="true" data-value="1"></i>
              <i class="far fa-star" aria-hidden="true" data-value="2"></i>
              <i class="far fa-star" aria-hidden="true" data-value="3"></i>
              <i class="far fa-star" aria-hidden="true" data-value="4"></i>
              <i class="far fa-star" aria-hidden="true" data-value="5"></i>
</div>

Answer 1

You try to bind to the icons before fontawesome has injected them into the page. Avoid that by binding to the parent div and using event delegation, like described here:

$('.comment-form-stars').on('mouseover', '[data-fa-i2svg]', function () {
            var onStar = parseInt($(this).data('value'), 10);
            $(this).parent().children('[data-fa-i2svg]').each(function (e) {
                if (e < onStar) {
                    $(this).removeClass('far');
                    $(this).addClass('fas');
                } else {
                    $(this).removeClass('fas');
                    $(this).addClass('far');
                }
            });

        }).on('mouseout', '[data-fa-i2svg]', function () {
            if (!ratingVal || ratingVal == 0) {
                $(this).parent().children('[data-fa-i2svg]').each(function (e) {
                    $(this).removeClass('far');
                    $(this).addClass('fas');
                });
            } else {
                $(this).parent().children('[data-fa-i2svg]').each(function (e) {
                    var r = parseInt($(this).data('value'), 10);
                    if (r < ratingVal) {
                        $(this).removeClass('far');
                        $(this).addClass('fas');
                    }
                });
            }
        });

.fa-star {
      color: #f8c31d;
      cursor: pointer;
   }

<link href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://use.fontawesome.com/releases/v5.7.2/js/all.js"></script>
<div class="comment-form-stars">
              <i class="fas fa-star" aria-hidden="true" data-value="1"></i>
              <i class="far fa-star" aria-hidden="true" data-value="2"></i>
              <i class="far fa-star" aria-hidden="true" data-value="3"></i>
              <i class="far fa-star" aria-hidden="true" data-value="4"></i>
              <i class="far fa-star" aria-hidden="true" data-value="5"></i>
</div>