Finden veränderte Form Element

Question

Ich bin mit jQuery Form Änderungsereignis

$('form').change(function(e) { 
    alert('hello'); 
}); 

Ich mag Element-ID wissen, für die geänderte Ereignis bildet abgefeuert wird.

Answer 1

Um dies zu erreichen, könnten Sie einen delegierten Handler für das Element form verwenden, das auf das Ereignis change für untergeordnete Formularsteuerelemente wartet.

Anschließend können Sie das this Schlüsselwort innerhalb der Event-Handler verwenden, um das Element zu verweisen, die das Ereignis ausgelöst hat, so etwas wie dieses:

$('form').on('change', ':input', function() { 
 
    console.log(this.id); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form> 
 
    <input type="text" id="foo" /> 
 
    <input type="text" id="bar" /> 
 
</form>

Alternativ können Sie Ihren aktuellen change Event-Handler halten auf der form und verlassen Sie sich auf das Ereignis sprudeln das DOM, und verwenden Sie die target -Eigenschaft des Ereignisses zu bestimmen, welches Element das Ereignis verursacht:

$('form').change(function(e) { 
 
    console.log(e.target.id); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form> 
 
    <input type="text" id="foo" /> 
 
    <input type="text" id="bar" /> 
 
</form>

Answer 2

$('form').change(function(e) { 
    alert($(this).attr('id')); 
}); 

Dies ist, wenn Sie erfahren möchten, welche Form es sich handelt. Wenn Sie wissen möchten, welche Eingabe in welcher Form ist, muss dies geändert werden. Sehen Sie sich die Antworten an, die von anderen hinzugefügt wurden.

Answer 3

Sie können $ (e.target) verwenden .attr ('id'): DEMO ANGEHÄNGTEM

$('form').on('change', function(e) { 
 

 
alert("$(e.target).attr('id'): " + $(e.target).attr("id")) 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form> 
 
    <input type="text" id="textBox1" placholder="textBox1"/> 
 
    <input type="text" id="textBox2" placholder="textBox1"/> 
 
</form>