用.on(）和JQUERY挂接事件

Hooking events with .on() with JQUERY

本文关键字：事件 JQUERY on      更新时间：2023-09-26

我想用.on（）方法挂接事件。问题是我不知道如何获得事件发生的元素的对象引用。也许这只是对该方法的实际工作方式的理解。。。但我希望你能帮忙。

我想做的是：

当选择一个文件时，我希望路径显示在div 中

<div class="wrapper">
    <input type="file" class="finput" />
    <div class="fpath">No file!</div>
</div>

这是我的脚本

$(document).ready(function() {
    $this = $(this);
    $this.on("change", ".finput", {}, function() {
        var path = $(this).val()
        $(this).parents().children(".fpath").html(path.split("''").pop());
    });
});

类似的东西，但那样是行不通的。

像这个

$(document).ready(function() {
    $('.finput').on("change", function() {
            var path = $(this).val()
            $(this).parents().children(".fpath").html(path.split("''").pop());
        });
});

您需要使用on（）吗？我不确定你到底想做什么。

$("#wrapper").on("change", ".finput", function(event){
     var path = $(this).val()
     $(this).parents().children(".fpath").html(path.split("''").pop());
});

我还没有测试您的代码，但您需要将on（）附加到包装器上。

你能用change（）吗？

$('.finput').change(function() {
 var path = $(this).val()
         $(this).parents().children(".fpath").html(path.split("''").pop());
});

这应该会有所帮助。如果您想查看文件输入何时更改，请将事件绑定到

  $("input[type='file']").on("change", function(e){
      var path = $(this).val();
  })

尝试：

$(document).ready(function() {

    $('body').on('change','input.finput', function() {
        var path = $(this).val()
        $(this).parent().children(".fpath").html(path.split("''").pop());
    });
});

$(document).on("change", ".finput", function() {
    $(".fpath").html(this.value.split("''").pop());
});

这是一个委托的事件处理程序，意味着.fnput元素是动态插入的，因此我们需要将侦听委托给父元素。

如果.fnput元素没有与Ajax一起插入，并且出现在页面加载中，则应该使用以下内容：

$(".finput").on("change", function() {
    $(".fpath").html(this.value.split("''").pop());
});
相关文章：