Wie Daten zu meinem Klick Zuhörer weitergeben

Question

Ich habe einen Knopf in meinem HTML-Code, wenn darauf geklickt wird, ich brauche es den Index Attributwert zu meinem Klick Zuhörer weitergeben muß:

<button class="btn buy-button js-prevent-cart-listener guys" index="1">Add To Cart</button> 

und der Hörer:

$('.girls').on('click', buyButtonGirlsClickHandler, index); 

So dass, wenn ich diese Funktion zu starten, kann ich den Ereigniswert zugreifen und sie in der Funktion:

function buyButtonClickHandler(evt) { 
    console.log(evt.value); 
    } 

I Ich möchte es nicht ändern, um einen 'onclick()' an den Button anzuhängen. Ist das möglich und wenn ja wie? Offensichtlich ist der obige Code nicht in der Lage, den Indexwert zu übergeben, und ich habe mehrmals versucht

Answer 1

Sie müssen den Index nicht in Funktion übergeben. Sie sollten versuchen, Ihre auf Funktion zu

$('.girls').on('click', buyButtonGirlsClickHandler); 

und im Handler zu ändern können Sie es durch attr

function buyButtonClickHandler(evt) { 
    console.log(evt.value); 
    var index= $(event.target).attr("index"); 
    } 

https://jsfiddle.net/525npjfn/

erhalten oder als @Andreas kommentiert, benutzen Sie diese Innenrasterung.

function buyButtonGirlsClickHandler(evt) { 
    console.log(evt.value); 
     var index = this.getAttribute("index"); 
     alert(index); 
    } 

https://jsfiddle.net/525npjfn/2/

Answer 2

Auf Schaltfläche klicken, können Sie es den Indexwert in einer Variablen speichern und sie dann in die gewünschte Funktion zu übergeben. Dies ist das saubere Snippet, um Ihr Problem zu lösen.

Verwenden Sie bitte das Präfix data-, um ein benutzerdefiniertes HTML-Attribut zu verwenden. Andernfalls werden HTML-Validatoren dafür weinen.

$(document).ready(function() { 
 
    $('.js-prevent-cart-listener').click(function() { 
 
    var idx = $(this).attr('data-index'); 
 
    buyButtonClickHandler(idx); 
 
    }) 
 
}); 
 

 
function buyButtonClickHandler(idx) { 
 
    console.log("This is index value " + idx); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button class="btn buy-button js-prevent-cart-listener guys" data-index="1">Add To Cart</button>

Answer 3

Statt direkt den Event-Handler von vorbei, wickeln Sie es in einer neuen Funktion. Ihre Indexdaten werden übergeben, da sie im Gültigkeitsbereich bleiben.

let index = "whatever your index data is"; 
$('.girls').on('click', (e, index) => buyButtonGirlsClickHandler(e, index)); 

Hinweis: Ich verwende ES6-Syntax dort, funktioniert möglicherweise nicht auf alten Browsern.