javascript - 无法跟踪输入值的变化

Question

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

<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 不允许这样做？请看我的screenshot :

有什么方法可以用 FU 解决这个问题吗？

Answer 1

如果您只是将此内联事件处理程序直接添加到模板元素，那么它永远不会被触发也就不足为奇了。 Fine Uploader 模板非常原始，因为模板被解释为 HTML 字符串，然后用于在容器元素(引用为 your element option 的元素)内创建 DOM 元素。

你真的不应该使用内联事件处理程序。这种方法有很多缺点。我在我的书中更深入地讨论了这个 - Beyond jQuery .据我所知，在您的情况下根本不需要附加事件处理程序的方法。相反，在构建 Fine Uploader 的新实例后，只需使用 addEventListener 将您选择的事件处理程序附加到输入元素即可。 .例如，如果您的 <input>元素的 CSS 类名称为“qq-edit-caption”，您可以像这样附加一个“更改”事件处理程序:

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...
   })

...并且如果您正在为每个文件创建此输入元素并且需要将“更改”处理程序附加到所有这些输入元素，您应该将一个委托(delegate)事件处理程序附加到容器元素，并根据最初触发事件的元素使用react(查看事件的 target 属性)。您可以通过查看父级的 CSS 类来确定文件的 ID <li>的 event.target ，或者您可以在父级 <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'))
         // ...
      }
   })