Question

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

当用户尝试单击该模板中的按钮时，我希望发生特定于地点的操作（例如，固定该位置）。为此，我需要在某处保存地点ID，以便侦听器代码知道该怎么做。我希望能够使用一个闭包来动态创建听众，这样我就可以把＃34;查看者获取详细信息的地点的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以某种方式将事件绑定到动态插入的模板，以便任何相关的上下文仍然可用于事件 - 这实际上是我想要在这里模仿的。

所以，关于如何以一种监听器接收关于＆＃34;对象＆＃34;的关键信息的方式向动态创建的元素添加监听器的任何建议。该元素在概念上是代表性的，不会使用额外的元数据使HTML膨胀（我已经看到人们使用ID＆＃34; save_button - ＆＃34;然后在破折号上拆分，但这似乎非常哈克？）？

谢谢！

Answer 1

我将尝试通过将参数传递给闭包来纠正您的实际方法，但您可能会找到更好的方法。

在你的情况下，你需要将$("#dnn_dnnUser_registerLink").hover作为参数传递给闭包，这就是你的代码应该如何：

place_id

我更改了变量名称，以便您可以获得两个参数之间的差异。

Answer 2

我已经使用了具有广泛范围的变量来保存下面快速而肮脏的示例中的选定ID。

＆＃13;

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

＆＃13;

#sections {
  display: none;
}

＆＃13;

<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>

＆＃13;

Answer 3

你实际上必须使用.on，这是jQuery匹配所有动态添加元素的方式。但是你不需要做任何事情＆＃34; hacky＆＃34;，你只需要将监听器绑定到父元素

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

在闭包中添加侦听器以动态添加HTML？

4 个答案: