Javascript 输入不触发时的jquery

我正在制作一个视频控制滑块，不知道为什么这个事件没有触发

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>

它无法获取事件，因为我从未看到警报

请尝试以下操作：

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

您还可以使用更改事件而不是输入 视频。音量。

试试这个：

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

您还可以使用更改事件而不是输入

---

video.volume.

您应该更改为

$（文档）。在（'change'，'.volume bar'，function（）{

，在jQuery中是

$（this）.val（）

而不是

$（this）.value（）


$（document）.on（'change'，'volume bar'，function（））{
const video=$（this）.closest（'.video container'）.children（'video'）.get（0）；
警报（$（this.val（））；
video.volume=$（this.val（）；
})；
您应该更改为
$（文档）。在（'change'、'.volume bar'，function（）{
上，在jQuery中是
$（this）.val（）
而不是
$（this）.value（）


$（document）.on（'change'，'volume bar'，function（））{
const video=$（this）.closest（'.video container'）.children（'video'）.get（0）；
警报（$（this.val（））；
video.volume=$（this.val（）；
})；
input

事件工作正常，但由于

input

的实现不一致，因此改用

change

另外，请始终检查控制台。

$.value（）

不是函数

$（document）.on（'input'，'volume bar'，function（））{
const video=$（this）.closest（'.video container'）.children（'video'）.get（0）；
警报（$（this.val（））；
video.volume=$（this.val（）；
})

---

input事件工作正常，但由于

input

的实现不一致，因此改用

change

另外，请始终检查控制台。

$.value（）

不是函数

$（document）.on（'input'，'volume bar'，function（））{
const video=$（this）.closest（'.video container'）.children（'video'）.get（0）；
警报（$（this.val（））；
video.volume=$（this.val（）；
})

我认为jquery on的参数是错误的。这就是事件没有为您触发的原因。第一个参数是事件类型（），在您的情况下可能是“更改”。您是否尝试过$（document）。on（'change'，'input.volume bar'，function（））？@HenryLu是的，我刚刚试过，但仍然没有触发事件。我认为您的jquery参数错误。这就是为什么事件没有为您触发。第一个参数是事件类型（），在您的情况下可能是“更改”。您试过$（document）。on（'change'，'input.volume bar'，function（））？@HenryLu是的，我只是尝试了一下，但仍然没有触发事件。谢谢，至少我现在触发了事件，但它似乎没有影响视频音量。编辑了我的回答视频.prop（'volume'，$（this.val（））；试试看，至少我现在触发了事件，但它似乎不会影响视频音量。编辑了我的回答video.prop（'volume'，$（this.val（））尝试it@caramba-它们是一样的。@caramba-这就是为什么你不应该无缘无故地任意改变大便。你的车的音量只有当你把手从旋钮上移开时才会改变吗？那太糟糕了。@caramba-它们是一样的。@caramba-这就是为什么你不应该无缘无故地任意改变大便的原因。是吗你车上的音量只有当你把手从旋钮上移开时才会改变？这是糟糕的ux。这不是“你喜欢”什么的问题改变事件与OP的问题无关。这不是“你喜欢”什么的问题改变事件与OP的问题无关。