0

我有一个<select class="listenToMe" /> 当改变做某事的时候。我还有一个单独的链接，单击该链接时会执行 ajax 请求并返回更多 dom 元素，并且在它们内部还有另一个<select class="listenToMe" />

我希望我的事件监听器也可以应用于这个元素。我正在尝试使用 jQuery 的 on 方法，但它似乎不起作用：

JS

var selectListener = function() { alert('you change me!'};
$('.listenToMe').on("change", selectListener);

$('.addMore').click( function() {
  $.post('myWebPage.php', {} , (function(data) {
    $(this).before(data);
    // data is something like <div><select class="listenToMe" /></div>
  }).bind(this));
});

HTML

<div>
  <div>
    <select class="listenToMe" />
  </div>
  <div>
    <select class="listenToMe" />
  </div>
  <a class="addMore">Click me</a>
</div>

有什么建议么？

4

2 回答 2

1

你可以试试

  $(document).on('change', '.listenToMe', function(){

   // Your code here
   })
于 2013-10-09T08:34:22.423 回答
1

你的使用on喜欢live。差异是微妙但重要的。您附加on到标记中的静态元素，然后根据选择器过滤事件。这样，on事件永远不会超出范围，例如，如果我有标记

<!-- this div is not dynamically loaded-->
<div id="mystaticDiv">
    <!--insert dynamic content here-->
</div>

当我添加动态标记时，它将变为：

<!-- this div is not dynamically loaded-->
<div id="mystaticDiv">
    <!--insert dynamic content here-->
    <div class="myDynamicdiv></div>
</div>

要在单击我的动态 div 时触发一个不需要重新绑定的事件，我将编写以下 jQuery：

$('#mystaticDiv').on('click', '.myDynamicdiv', function() {/*Do stuff*/});

所以我将 my 绑定on到#mystaticDiv但过滤上.myDynamicdiv. 现在我可以添加任意数量 .myDynamicdiv的 s，这将起作用。

我提到过live。这已被弃用，但其工作方式与您尝试的方式相同。这会将事件附加到页面的文档，其中选择器基于您附加live到的选择器。所以$('.myDynamicdiv').live('click', function() {/*Do stuff*/});直接等价于$(document).on('click', '.myDynamicdiv', function() {/*Do stuff*/});。我提到这一点的原因是这就是您尝试使用的方式on。

你的代码$('.listenToMe').on("change", selectListener);。不适用于动态内容。此代码将事件附加到尚不存在的动态内容。所以从来没有真正绑定过。有趣$('.listenToMe').on("change", selectListener);的是，这正是$('.listenToMe').change(selectListener);引擎盖下的作用。

于 2013-10-09T08:55:49.260 回答