用.on（）与JQUERY挂钩事件

我想用.on（）方法挂钩事件。问题是我不知道如何获取事件发生的元素的对象引用。也许这是对方法真正起作用的中间理解......但我希望你能提供帮助。用.on（）与JQUERY挂钩事件

这就是我想做的事：

当选择了一个文件，我想的路径显示在一个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()); 
    }); 
});

喜欢的东西但那样它不起作用。

来源

2012-03-12 maniak

那么你的{}做？我认为这是没有必要的，所以你可以删除它！ – 2012-03-12 15:31:38

什么不行？在'on'回调中，'this'将引用具有类'finput'的元素。 **你的代码对我来说工作正常**：http://jsfiddle.net/JjnmE/但是如果你的程序在严格模式下运行，'$（this）'可能不起作用。改用'$（window）'。 – 2012-03-12 15:31:42

http://jsfiddle.net/g4k5d/ <为我工作，必须是你最后一行的问题。 – 2012-03-12 15:34:17

像这样

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

来源

2012-03-12 15:31:01 Pheonix

你需要使用的（）？我不确定你想要做什么。

$("#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()); 
});

来源

2012-03-12 15:31:50 User970008

方法'on'是现在处理事件的默认方法，请看这个（来自jquery.com）： .on（）方法将事件处理程序附加到jQuery对象中当前选定的一组元素。从jQuery 1.7开始，.on（）方法提供了附加事件处理程序所需的全部功能。有关从旧的jQuery事件方法转换的帮助，请参阅.bind（），.delegate（）和.live（） – Drachenfels 2012-03-12 15:38:55

我可能是错误的，因为我没有检查源代码，但是我认为**无论如何，'.change（）'，'.click（）'等都会在后端调用'.on（）'。 – 2012-03-12 15:49:07

这应该有所帮助。如果你想看到当一个文件输入的变化，事件绑定到它

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

来源

2012-03-12 15:33:07 DG3

但问题是我在dom加载后添加了新的finput，并且它们没有绑定到事件上。我想模仿这个。live（）函数 – maniak 2012-03-12 15:47:01

我修改了脚本，将该输入动态添加到body标签，并且它仍然适用于我。你可以检查我的代码片段： http://dl.dropbox.com/u/196245/index19.html – Drachenfels 2012-03-12 16:00:49

尝试：

$(document).ready(function() { 


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

来源

2012-03-12 15:33:40

问题是当我在页面完全加载后添加新的finput时，它们没有附加到这个事件。这就是为什么我使用.on（）文档和选择器.finput作为参数。我所理解的是，通过将选择器“.input”作为参数传递，它将在事件触发时进行评估。如果我使用.live（）它很好，但它是deporated ... – maniak 2012-03-12 15:46:12

@maniak好吧，我明白了。我更新了代码以使用委派。我没有测试过它，我不确定'身体'上的变化事件是否有意义。 – 2012-03-12 15:52:39

@maniak看看这个简单的[小提琴]（http://jsfiddle.net/M6NcP/）我创建的备份我的最后一条评论。如果动态添加输入，那么该处理程序仍然可以工作。 – 2012-03-12 15:56:02

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

这是一个委托的事件处理程序，这意味着.finput元素已经被插入动态的，所以我们需要委托监听父元素。

如果.finput元素不与阿贾克斯插入并且将出现在页面加载，你应该使用这样的事情，而不是：

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

来源

2012-03-12 15:54:01 adeneo

用.on（）与JQUERY挂钩事件

回答

相关问题