Listener zu dynamisch hinzugefügtem HTML innerhalb von Closure hinzufügen?

Question

Ich habe eine Liste von Orten in Google Maps, auf die ein Benutzer klicken kann. Wenn sie klicken, erzeuge ich eine Vorlage, die die Informationen für diesen Ort anzeigt. Im Moment habe ich ein Container-Div, das ich mit der neu erzeugten Vorlage .replaceWith() anrufe.

Wenn ein Benutzer versucht, auf eine Schaltfläche in dieser Vorlage zu klicken, möchte ich eine ortspezifische Aktion ausführen (z. B. den Ort anheften). Um dies zu tun, brauche ich die Ort-ID irgendwo gespeichert, damit der Listener-Code weiß, was zu tun ist. Ich hatte gehofft, einen Verschluss zu verwenden, um die Hörer on the fly zu erstellen, so dass ich die ID des Orts „umschließen“ könnte, dass der Betrachter Details wird immer für:

function selectPlace(place_id) { 

    // Swap out the old template 
    $("#listing-placeholder").replaceWith(listing_info_template(place)); 

    // Create a listener to handle clicks while remembering the place_id 
    (function(){ 
     $('.save_button').click(function(){ 
      alert("Clicked handler for " + place_id); 
     }); 
    })(); 
} 

Dies scheint nicht überhaupt zu arbeiten ; mein Zuhörer feuert nie. Es scheint, dass dies mit der Tatsache zusammenhängt, dass .save_button innerhalb der Vorlage liegt (dynamisch hinzugefügt). Nicht sicher, warum das so ist.

Ich zögere, .on() zu verwenden, denn dann müsste ich die ID irgendwo in die Vorlage setzen, was sich für mich echt hacky anfühlt. Ich weiß, dass backbonejs Ereignisse irgendwie an dynamisch eingefügte Vorlagen bindet, so dass jeder relevante Kontext für Ereignisse noch verfügbar ist - das ist effektiv, was ich hier nachahmen möchte.

Also, irgendwelche Vorschläge, wie ich einen Listener zu einem dynamisch erstellten Element in einer Weise hinzufügen kann, dass der Listener Schlüsselinformationen über das "Objekt" erhält, das konzeptionell darstellt, ohne den HTML mit zusätzlichen Metadaten aufzublähen (I habe Leute gesehen, die die IDs wie "save_button-" machen und dann auf dem Armaturenbrett teilen, aber das scheint extrem hacky?)?

Danke!

Answer 1

ich eine Variable mit einem breiten Anwendungsbereich verwendet haben, halten ausgewählt Id in der schnelles und schmutziges Beispiel unten.

var selectedId; //Holds seleced ID 
 

 
function selectPlace(place_id) { 
 

 
    // Swap out the old template 
 
    //$("#listing-placeholder").replaceWith(listing_info_template(place)); 
 
    $("#listing-placeholder").replaceWith($("#section" + place_id)); 
 
    //Sotre the ID here 
 
    selectedId = place_id; 
 
} 
 

 
$(document).ready(function() { 
 
    $("#cbId").change(function() { 
 
    selectPlace($(this).val()) 
 
    }); 
 

 
    //Set up event listener. Change #target as appropriate for you 
 
    $("#target").on("click", ".save_button", function() { 
 
    alert(selectedId); 
 
    }); 
 

 
});

#sections { 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div> 
 
    <label>Select a section 
 
    <select id="cbId"> 
 
     <option></option> 
 
     <option>1</option> 
 
     <option>2</option> 
 
     <option>3</option> 
 
    </select> 
 
    </label> 
 
</div> 
 
<div id="target"> 
 
    <div id="listing-placeholder"> 
 
    I'm the place holder 
 
    </div> 
 
</div> 
 
<div id="sections"> 
 
    <!--No Event Listeners Will be bound directly untill template is replaced --> 
 
    <div id="section1"> 
 
    <h2>I'm section 1</h2> 
 
    <input type="button" value="Save Button" class="save_button"> 
 
    </div> 
 
    <div id="section2"> 
 
    <h2>I'm section 2</h2> 
 
    <input type="button" value="Save Button" class="save_button"> 
 
    </div> 
 
    <div id="section3"> 
 
    <h2>I'm section 3</h2> 
 
    <input type="button" value="Save Button" class="save_button"> 
 
    </div> 
 
</div>

Answer 2

Ich werde nur versuchen, Ihren tatsächlichen Ansatz zu korrigieren, indem Sie den Parameter an Ihre Schließung übergeben, aber Sie können einen besseren Ansatz finden.

In Ihrem Fall müssen Sie auch die place_id als Parameter zur Schließung passieren, ist dies, wie Ihr Code sein sollte:

function selectPlace(place_id) { 

    // Swap out the old template 
    $("#listing-placeholder").replaceWith(listing_info_template(place)); 

    // Create a listener to handle clicks while remembering the place_id 
    (function(id){ 
     $('.save_button').click(function(){ 
      alert("Clicked handler for " + id); 
     }); 
    })(place_id); 
} 

ich den Variablennamen geändert, so dass Sie den Unterschied zwischen den beiden bekommen Parameter.

Answer 3

Sie müssen tatsächlich .on verwenden, es ist die Art, wie jQuery alle dynamisch hinzugefügten Elemente abgleicht. Aber Sie brauchen nichts „Hacky“ zu tun, müssen Sie nur noch den Hörer an ein übergeordnetes Element binden

`$(parent).on('click', '.save_button', {}); 

Answer 4

function selectPlace(place_id) { 

    // Swap out the old template 
    $("#listing-placeholder").replaceWith(listing_info_template(place)); 

    // Create a listener to handle clicks while remembering the place_id 

     $(document).on('click', '.save_button').click(function(){ 
      alert("Clicked handler for " + place_id); 
     }); 
}