无法跟踪输入值的变化
在模板中，我有一个输入元素。
我想跟踪输入值的变化，并启用“更新”按钮。请选择以下选项：
-
onkeypress='captionUpdate();' - 尝试更改jquery或单击该类
$('.qq-edit-caption').change(function() { alert('qq-edit-caption'); });
这两个选项都没有被激活!!不确定我的设置有什么问题或Fine Uploader不允许这样做？ 请看我的截图 ：
有什么办法用FU解决这个问题？
如果您只是将此内联事件处理程序直接添加到模板元素中，那么它永远不会被触发就不足为奇了。 Fine Uploader模板非常原始，因为模板被解释为HTML字符串，然后用于在容器元素内部创建DOM元素（作为element选项引用的element ）。
你真的不应该使用内联事件处理程序。 这种方法有很多缺点。 我在书中更深入地讨论了这个问题 – 超越jQuery 。 据我所知，在你的情况下根本不需要附加事件处理程序的方法。 相反，在构建Fine Uploader的新实例之后，只需使用addEventListener将您选择的事件处理程序附加到input元素。 例如，如果元素的CSS类名称为“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... })
…如果要为每个文件创建此输入元素并需要将“更改”处理程序附加到所有这些输入元素，则应将单个委托事件处理程序附加到容器元素，并根据元素进行响应最初触发事件（查看事件的target属性）。 您可以通过查看event.target的父
的CSS类来确定文件的ID，也可以在目标元素的父
上查找“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')) // ... } })
这可能会让你开始：
$('.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;}
您可以通过输入值启用和禁用按钮的状态。使用Keyupfunction
$('.qq-edit-caption').keyup(function() { if(this.value.length > 0){ $("#edit").prop('disabled', false); } else { $("#edit").prop('disabled', true); } });
你有没有尝试过onchange事件？ 它有用吗？