无法跟踪输入值的变化

Question

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

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

我想跟踪输入值的变化，并启用以下选项的更新button.Tried：

onkeypress='captionUpdate();'
已尝试 jquery 更改或单击 class

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

两个选项都没有启动！！不确定我的设置有任何问题还是 Fine Uploader 不允许这样做？请看我的 screenshot:

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

Answer 1

你试过onchange事件吗？有用吗？

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

Answer 2

这可能会让您入门：

$('.inp input').keyup(function(){
   if (this.value.length > 0) {
     $(this).closest('.row').find('.cell.btn button.upload').prop('disabled', false);
   }else{
     $(this).closest('.row').find('.cell.btn button.upload').prop('disabled', true);
   }
});

* {position:relative;box-sizing:border-box;}
.row{overflow:hidden;}
  .cell{float:left;height:40px;}
    .pic{width:82px;}
    .inp{width:230px;}
      .inp input{font-size:1rem;padding:2px 5px;}
    .btn{width:60px;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="row">
  <div class="cell pic">
    <img src="http://lorempixel.com/80/40">
  </div>
  <div class="cell inp">
    <input class='qq-edit-caption-selector qq-edit-caption kk-editing' placeholder='Enter Caption...'>
  </div>
  <div class="cell btn">
    <button class="upload" disabled>Upload</button>
  </div>
  <div class="cell btn">
    <button class="del" disabled>Delete</button>
  </div>
</div><!-- .row -->

Answer 3

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

您真的不应该使用内联事件处理程序。这种方法有很多缺点。我在我的书中更深入地讨论了这一点 - Beyond jQuery。据我所知，在您的情况下根本不需要附加事件处理程序的方法。相反，在构建 Fine Uploader 的新实例后，只需使用 addEventListener 将您选择的事件处理程序附加到输入元素。例如，如果您的 <input> 元素被赋予 CSS class 名称 '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...
   })

...并且如果您正在为每个文件创建此输入元素并且需要将 "change" 处理程序附加到这些输入元素的 all，您应该附加单个委托事件处理程序到容器元素，并根据最初触发事件的元素做出反应（查看事件的 target 属性）。您可以通过查看 event.target 的父 <li> 的 CSS class 来确定文件的 ID，或者您可以查找 'qq-file-id' 属性在目标元素的父 <li> 上（该值将是文件 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'))
         // ...
      }
   })

Answer 4

您可以通过输入 value.Using Keyup 函数

来启用和禁用按钮的状态

 $('.qq-edit-caption').keyup(function() {
       if(this.value.length > 0){
            $("#edit").prop('disabled', false);
       }
       else {
        $("#edit").prop('disabled', true);
       }
    });

无法跟踪输入值的变化

Not able to track change in input value

javascript

jquery

fine-uploader