jQuery ON-Funktion mit Werten, die Parametern zugewiesen sind

Question

Ich versuche, eine Funktion mit einer Änderung in Radio Button-Auswahl zu delegieren.

$(document).ready(function(){ 
    $('body').on('change', 'radioBtnName', function(e){ 
     $(this).after('<p>"No click me!"</p>'); 
    }); 
});​ 

Ich möchte in der Lage sein, einige Werte an die Handler-Funktion übergeben. Wie

{param1:"hell", param2:"world"} 

Und dann für den Zugriff auf diese Werte innerhalb der Funktion (e) von

e.data.param1 

Wie füge ich diese Parameter und geben sie bei der Festlegung der Delegierten-Werte. Ich erstelle die Radioknöpfe im laufenden Betrieb und möchte die Funktion mit einer Änderung der Auswahl verknüpfen.

Answer 1

Wenn ich dich richtig verstanden habe, willst du zusätzliche Parameter mit der .on() Methode übergeben. Ich hoffe das folgende Beispiel hilft dir.

$(document).on('change', '#radioBlock input[type="radio"]', {param1: 'hell', param2: 'world'}, function(e){ 
 
    console.log(e.data.param1); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div id="radioBlock"> 
 
    <input type="radio" id="one" name="one" value="One"> 
 
    <input type="radio" id="two" name="two" value="Two"> 
 
    <input type="radio" id="three" name="three" value="Three"> 
 
</div>

Answer 2

Dies könnte leicht mit data-*-Attributen erfolgen, wenn sie pro Element sind. So haben Sie die Taste mit:

<input type="radio" data-param1="hell" data-param2="world" /> 

Und bekommen sie mit:

$(this).data("param1"); 
$(this).data("param2"); 

Auch, wenn Sie die $(this).data() rufen, wird es bringen Sie das ganze data Objekt.

Answer 3

speichern sie als Daten auf den Radio-Buttons Attribute:

$(document).on('change', 'radioBtnName', function(e){ 
    var $button = $(this); 
    var param1 = $button.data("param1"); 
    var param2 = $button.data("param2"); 
    // do whatever you want with the values :) 
}); 

Hinweis Verwendung document statt body für delegierte Veranstaltungen. Dies vermeidet die Notwendigkeit für einen DOM ready Handler (und vermeidet einen Fehler mit body)

Answer 4

können Sie $(this).data() wie folgt verwenden:

$(function() { 
 
    
 
    $("body").on('click', "#radioBlock input[type='radio']", function(e) { 
 
\t 
 
\t alert('Data Value - ' + $(this).data('value')); 
 

 
    }) 
 

 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="radioBlock"> 
 

 
    <label> <input type='radio' name='radio_input' data-value='1'> Radio 1 </label> 
 
    <label> <input type='radio' name='radio_input' data-value='2'> Radio 2 </label> 
 
    <label> <input type='radio' name='radio_input' data-value='3'> Radio 3 </label> 
 

 
</div>

hoffe, das hilft!