Änderung des Eingabewerts nicht verfolgen können

Question

In der Vorlage habe ich ein Eingabeelement.

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

Ich möchte die Änderung der Eingangswert verfolgen, und aktivieren Sie das Update unter Optionen button.Tried:

• onkeypress='captionUpdate();'
• Versuchte jquery ändern oder klicken Sie auf die Klasse

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

Beide Optionen werden nicht aktiviert !! Ich bin nicht sicher, dass ich Probleme mit meinem Setu habe p oder Fine Uploader erlaubt das nicht? Bitte beachten Sie meine screenshot:

Jede Art und Weise, dieses Problem mit FU zu lösen?

Answer 1

Wenn Sie einfach diesen Inline-Event-Handler direkt an der Vorlage Element hinzugefügt wird, dann überraschend ist es nicht, dass es nie ausgelöst wird. Fine Uploader-Vorlagen sind recht primitiv, da die Vorlage als HTML-Zeichenfolge interpretiert und anschließend zum Erstellen von DOM-Elementen innerhalb Ihres Containerelements verwendet wird (das Element, das als your element option referenziert wird).

Sie sollten nie Inline-Event-Handler verwenden. Dieser Ansatz hat einige Nachteile. Ich spreche darüber in meinem Buch - Beyond jQuery. Und die Methode, Event-Handler anzuhängen, ist in Ihrem Fall überhaupt nicht notwendig, soweit ich das beurteilen kann. Fügen Sie nach dem Erstellen einer neuen Instanz von Fine Uploader einfach einen Ereignishandler Ihrer Wahl dem Eingabeelement mithilfe von addEventListener hinzu. Zum Beispiel, wenn Ihr <input> Element eine CSS-Klasse Namen ‚qq-edit-caption‘ gegeben, können Sie ein „change“ Event-Handler wie folgt anhängen:

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

... und wenn Sie erstellen diesen Eingang Element für jede Datei und müssen einen "change" - Handler an alle dieser Eingabeelemente anhängen, sollten Sie einen einzelnen delegierten Ereignishandler an das Containerelement anhängen und basierend auf dem Element reagieren, das das Ereignis ausgelöst hat (siehe target Eigentum der Veranstaltung). Sie können die ID der Datei ermitteln, indem Sie sich die CSS-Klasse des übergeordneten Elements <li> der event.target ansehen, oder Sie können nach einem Attribut 'qq-file-id' für das übergeordnete Element <li> des Zielelements suchen (der Wert ist der Datei-ID). Dieser Code könnte wie folgt aussehen:

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

Haben Sie das Onchange-Ereignis versucht? Funktioniert es?

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

Answer 3

Dies könnte Ihnen den Einstieg:

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

Sie können den Status der Taste durch die Eingabe value.Using die keyUp Funktion aktivieren und deaktivieren

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