無法跟蹤輸入值的變化

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