CODEWITHSUNDEEP
javascriptjquery
Sandra Willford
Sandra Willford

Reputation: 3789

jquery on input not firing

I am working on a video control slider and not sure why this event is not firing.

jquery: 

$(document).on('input', '.volume-bar', function() {
    const video = $(this).closest('.video-container').children('video').get(0);
    alert($(this).value());
    video.volume = $(this).value();
})

html: 

<div class="col-md-6 offset-md-3 video-container px-0">
    <video id="rogueVideo" width="100%" poster="images/posters/rogue.jpg">
        <source src="videos/rogue.mp4" type="video/mp4">
    </video>
    <div class="video-controls">
        <button class="play-pause btn btn-primary btn-sm mr-1" type="button"><i class="fas fa-play fa-fw"></i></button>
        <input class="seek-bar w-100 mr-1" type="range" value="0">
        <button class="mute btn btn-primary btn-sm mr-1" type="button"><i class="fas fa-volume-off fa-fw"></i></button>
        <input class="volume-bar w-25 mr-1" type="range" min="0" max="1" step="0.1" value="1">
        <button class="full-screen btn btn-primary btn-sm mr-1" type="button"><i class="fas fa-expand fa-fw"></i></button>
    </div>
</div>

it's not getting the event because I never see the alert

Upvotes: 0

Views: 62

Answers (3)

caramba
caramba

Reputation: 22480

You should change to $(document).on('change', '.volume-bar', function() { and in jQuery it's $(this).val() not $(this).value()

$(document).on('change', '.volume-bar', function() {
    const video = $(this).closest('.video-container').children('video').get(0);
    alert($(this).val());
    video.volume = $(this).val();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-6 offset-md-3 video-container px-0">
    <video id="rogueVideo" width="100%" poster="images/posters/rogue.jpg">
        <source src="videos/rogue.mp4" type="video/mp4">
    </video>
    <div class="video-controls">
        <button class="play-pause btn btn-primary btn-sm mr-1" type="button"><i class="fas fa-play fa-fw"></i></button>
        <input class="seek-bar w-100 mr-1" type="range" value="0">
        <button class="mute btn btn-primary btn-sm mr-1" type="button"><i class="fas fa-volume-off fa-fw"></i></button>
        <input class="volume-bar w-25 mr-1" type="range" min="0" max="1" step="0.1" value="1">
        <button class="full-screen btn btn-primary btn-sm mr-1" type="button"><i class="fas fa-expand fa-fw"></i></button>
    </div>
</div>

Upvotes: 2

I wrestled a bear once.
I wrestled a bear once.

Reputation: 23379

the input event works just fine, but Mozilla does recommend using change instead since input's implementation is inconsistent.

Also, always check the console. $.value() is not a function.

$(document).on('input', '.volume-bar', function() {
  const video = $(this).closest('.video-container').children('video').get(0);
  alert($(this).val());
  video.volume = $(this).val();
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-6 offset-md-3 video-container px-0">
  <video id="rogueVideo" width="100%" poster="images/posters/rogue.jpg">
        <source src="videos/rogue.mp4" type="video/mp4">
    </video>
  <div class="video-controls">
    <button class="play-pause btn btn-primary btn-sm mr-1" type="button"><i class="fas fa-play fa-fw"></i></button>
    <input class="seek-bar w-100 mr-1" type="range" value="0">
    <button class="mute btn btn-primary btn-sm mr-1" type="button"><i class="fas fa-volume-off fa-fw"></i></button>
    <input class="volume-bar w-25 mr-1" type="range" min="0" max="1" step="0.1" value="1">
    <button class="full-screen btn btn-primary btn-sm mr-1" type="button"><i class="fas fa-expand fa-fw"></i></button>
  </div>
</div>

Upvotes: 0

neoteknic
neoteknic

Reputation: 1970

Try this :

$(function(){
    $('.volume-bar').on('input',function() {
       var video = $(this).closest('.video-container').children('video').first();
       alert($(this).val());
       video.prop('volume',$(this).val());
    });
});

you change also use the change event instead of input video.volume.

Upvotes: 2

Related Questions