无法跟踪输入值的变化 [英] Not able to track change in input value

问题描述

在模板中，我有一个输入元素.

<input class='qq-edit-caption-selector qq-edit-caption kk-editing' placeholder='Enter Caption here ...' onkeypress='captionUpdate();'>

我想跟踪输入值的变化，并启用更新"按钮.尝试了以下选项:

• onkeypress='captionUpdate();'
• 尝试更改jquery或单击类

 $('.qq-edit-caption').change(function() {
    alert('qq-edit-caption');        
});
 

两个选项均无法启动！不确定我的设置是否存在任何问题，或者Fine Uploader不允许这样做?请查看我的屏幕截图:

有什么方法可以解决FU吗?

解决方案

如果您只是将此内联事件处理程序直接添加到模板元素中，那么它永远不会触发也就不足为奇了. Fine Uploader模板非常原始，因为模板被解释为HTML字符串，然后用于在容器元素(称为超越jQuery .据我所知，在您的情况下，完全不需要附加事件处理程序的方法.相反，在构造Fine Uploader的新实例之后，只需使用addEventListener将您选择的事件处理程序附加到输入元素即可.例如，如果您的<input>元素的CSS类名称为"qq-edit-caption"，则可以附加一个"change"事件处理程序，如下所示:

var uploadContainer = document.querySelector('#my-uploader')

var uploader = new qq.FineUploader({
   element: uploadContainer
   ...
})

uploadContainer.querySelector('.qq-edit-caption')
  .addEventListener('change', function(event) {
      // event handler logic here...
   })

...并且如果您要为每个文件创建此输入元素，并且需要在所有这些输入元素的 all 上附加一个更改"处理程序，则应将一个委派的事件处理程序附加到容器元素，并根据最初触发事件的元素做出反应(请查看事件的target属性).您可以通过查看event.target的父<li>的CSS类来确定文件的ID，或者可以在目标元素的父<li>上查找'qq-file-id'属性(该值将是文件ID).该代码可能看起来像这样:

var uploadContainer = document.querySelector('#my-uploader')

var uploader = new qq.FineUploader({
   element: uploadContainer
   ...
})

uploadContainer.addEventListener('change', function(event) {
      if (event.target.className.indexOf('qq-edit-caption') >= 0) {
         var fileId = parseInt(event.target.getAttribute('qq-file-id'))
         // ...
      }
   })

In the template I have a input element.

<input class='qq-edit-caption-selector qq-edit-caption kk-editing' placeholder='Enter Caption here ...' onkeypress='captionUpdate();'>

I want to track the change in the input value,and enable the Update button.Tried below options:

• onkeypress='captionUpdate();'
• Tried jquery change or click on the class

$('.qq-edit-caption').change(function() {
    alert('qq-edit-caption');        
});

Both options does not get fired up!!not sure I have anything issues with my setup or Fine Uploader does not allow that? Please see my screenshot:

Any way to solve this problem with FU?

解决方案

If you are simply adding this inline event handler directly to the template element, then it's not surprising that it's never triggered. Fine Uploader templates are quite primitive in that the template is interpreted as an HTML string and then used to create DOM elements inside of your container element (the element referenced as your element option).

You really should never use inline event handlers. There are quite a few disadvantages to this approach. I talk about this in more depth in my book - Beyond jQuery. And the method of attaching event handlers is not necessary at all in your case, as far as I can tell. Instead, after constructing a new instance of Fine Uploader, simply attach an event handler of your choice to the input element using addEventListener. For example if your <input> element is given a CSS class name of 'qq-edit-caption', you can attach a "change" event handler like this:

var uploadContainer = document.querySelector('#my-uploader')

var uploader = new qq.FineUploader({
   element: uploadContainer
   ...
})

uploadContainer.querySelector('.qq-edit-caption')
  .addEventListener('change', function(event) {
      // event handler logic here...
   })

...and if you are creating this input element for each file and need to attach a "change" handler to all of these input elements, you should attach a single delegated event handler to the container element, and react based on the element that initially triggered the event (look at the target property of the event). You can determine the ID of the file by looking at the CSS class of the parent <li> of the event.target, or you can look for a 'qq-file-id' attribute on the parent <li> of the target element (the value will be the file ID). That code might look something like this:

var uploadContainer = document.querySelector('#my-uploader')

var uploader = new qq.FineUploader({
   element: uploadContainer
   ...
})

uploadContainer.addEventListener('change', function(event) {
      if (event.target.className.indexOf('qq-edit-caption') >= 0) {
         var fileId = parseInt(event.target.getAttribute('qq-file-id'))
         // ...
      }
   })

这篇关于无法跟踪输入值的变化的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！