无法跟踪输入值的变化

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();'>

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

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

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

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

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

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

这可能会让您入门:

$('.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 -->

如果您只是将此内联事件处理程序直接添加到模板元素,那么它永远不会被触发也就不足为奇了。 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'))
         // ...
      }
   })

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

来启用和禁用按钮的状态
 $('.qq-edit-caption').keyup(function() {
       if(this.value.length > 0){
            $("#edit").prop('disabled', false);
       }
       else {
        $("#edit").prop('disabled', true);
       }
    });