javascript - 将监听器添加到闭包中动态添加的 HTML？

Question

我有一个用户可以点击的谷歌地图中的位置列表。当他们点击时，我会生成一个显示该地点信息的模板。现在，我有一个容器 div，我使用新生成的模板调用 .replaceWith()。

当用户尝试单击该模板中的按钮时，我希望发生特定于地点的操作(例如固定地点)。为此，我需要将地点 ID 保存在某处，以便监听器代码知道该做什么。我希望使用闭包来动态创建监听器，以便我可以“包含”查看器获取详细信息的位置的 ID:

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);
        });
    })();
}

这似乎根本不起作用；我的听众从不开火。这似乎与 .save_button 位于模板内部(动态添加)这一事实有关。不确定这是为什么。

我对使用 .on() 犹豫不决，因为那样我就必须将 ID 放在模板中的某处，这对我来说真的很麻烦。我知道 backbonejs 以某种方式将事件绑定(bind)到动态插入的模板，以便任何相关的上下文仍然可用于事件 - 这就是我在这里想要模仿的效果。

因此，关于如何将监听器添加到动态创建的元素的任何建议，使监听器接收有关该元素在概念上表示的“对象”的关键信息，而不会用额外的元数据使 HTML 膨胀(我'我见过有人将 id 设置为“save_button-”，然后在破折号上拆分，但这似乎非常 hacky？)？

谢谢!

Answer 1

在下面的快速粗略示例中，我使用了一个范围很广的变量来保存选定的 Id。

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>