无法跟踪输入值的变化

Question

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

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

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

• onkeypress='captionUpdate();'
• 试过jQuery的变化，或者点击类

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

两个选项都没有被激发!!不知道我的setu有什么问题p或Fine Uploader不允许这样做？请参阅我的screenshot：

什么办法能解决这个问题，FU？

Answer 1

如果您只是直接添加此联事件处理程序的模板元素，那么它并不奇怪，它永远不会触发。 Fine Uploader模板相当原始，因为模板被解释为一个HTML字符串，然后用于在容器元素（引用为your element option）中创建DOM元素。

你真的不应该使用内联事件处理程序。这种方法有很多缺点。我在书中更深入地讨论了这个问题 - Beyond jQuery。据我所知，附加事件处理程序的方法根本不需要。相反，在构建Fine Uploader的新实例之后，只需使用addEventListener将所选事件处理程序附加到输入元素即可。例如，如果你<input>元素被赋予的“QQ编辑字幕”，就可以把“变”事件处理这样的CSS类名：

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

...如果你正在创建此输入元素，并且需要将这些输入元素的“更改”处理程序附加到全部，则应该将一个委托的事件处理程序附加到容器元素，并根据最初触发该事件的元素作出反应（查看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')) 
     // ... 
     } 
    }) 

Answer 2

您是否尝试过onchange事件？它工作吗？

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

Answer 3

这可能让你开始：

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

您可以启用和通过输入value.Using的KEYUP功能

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