jquery on input not firing

Question

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

i think you have the parameters for jquery on wrong. which is why the event is not firing for you. first parameter is the event type (api.jquery.com/on) which in your situation is probably 'change'. have you tried $(document).on('change', 'input.volume-bar', function() ? — Henry Lu
– Henry Lu, Commented Feb 2, 2018 at 18:02
@HenryLu yea, I just tried that and still not triggering and the event — Sandra Willford
– Sandra Willford, Commented Feb 2, 2018 at 18:05

neoteknic · Accepted Answer · 2018-02-02 18:11:07Z

2

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.

edited Feb 2, 2018 at 18:11

answered Feb 2, 2018 at 18:07

neoteknic

2,00017 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Sandra Willford Over a year ago

thanks I at least have the event firing now, but it doesn't seem to be effecting the video volume.

neoteknic Over a year ago

Edited my answer video.prop('volume',$(this).val()); try it

caramba · Accepted Answer · 2018-02-02 18:17:41Z

2

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>

edited Feb 2, 2018 at 18:17

answered Feb 2, 2018 at 18:10

caramba

22.5k20 gold badges94 silver badges134 bronze badges

1 Comment

I wrestled a bear once. Over a year ago

it's not a matter of what "you like" changing the event has nothing to do with the OP's problem.

I wrestled a bear once. · Accepted Answer · 2018-02-02 18:12:21Z

0

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>

answered Feb 2, 2018 at 18:12

I wrestled a bear once.

23.5k20 gold badges74 silver badges122 bronze badges

2 Comments

I wrestled a bear once. Over a year ago

@caramba - they're the same thing.

I wrestled a bear once. Over a year ago

@caramba - that's exactly why you shouldnt arbitrarily change shit for no reason. does the volume on your car stero only change when you remove your hand from the knob? that's bad ux.

Collectives™ on Stack Overflow

jquery on input not firing

3 Answers 3

2 Comments

1 Comment

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related