Bindung an jquery Funktion Problem

Question

Ich benutze JQuery innerhalb EcmaScript 6 Klasse, und ich habe eine Ereignisfunktion, die auf Instantiierung der Klasse ausgelöst und das Ereignis enthält verschiedene JQuery-Ereignisse, die mit der Klasse interagieren müssen, also tue ich. bind(), um das zu erreichen, funktioniert alles ok bis auf ein Ereignis, das aus irgendeinem Grund das jquery Element "this" mit "that" überschreibt, das ich mit .bind (that) Methode übergeben habe, hier ist mein Code (alles funktioniert außer für diese Veranstaltung):

var that = this; 
$(document).on('click', '[select-file]' , function(event) { 
event.preventDefault(); 


console.log(this); 

}.bind(that)); 

so gibt das Konsolenprotokoll mir die übergeordnete Klasse statt jquery Element wo, wie dies funktioniert wie erwartet:

  $(document).on('click', '[open-file-dialoge]', function(event) { 
       event.preventDefault(); 
        $('[file-dialoge]').modal('show'); 
        if ($(this).attr('mitiupload') == 'false') { 
        // check if multiple upload is disabled 
        that.multiUpload = false; 
        $(this).removeAttr('multiple'); 
        } 
        that.insertFiles(); 
      }.bind(that)); 

Pleas helfen, kann ich nicht verstehen, was hier vor sich geht man wie auch erwartet nicht funktioniert, obwohl es keinen großen Unterschied zwischen ihnen ist, (

Answer 1

Function#bind() den Kontext this in einer Funktion ändert. Wenn Sie das aktuelle Element möchten, können Sie event.currentTarget

var that = {}; 
 
$(document).on('click', 'button', function(event) { 
 
    event.preventDefault(); 
 
    var el = event.currentTarget; 
 

 
    console.log('this=', this); 
 
    console.log('el=', el) 
 

 
}.bind(that));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button id="test">Click me</button>