Javascript jQuery，函数中不需要的重复执行函数，动态加载内容后

在加载动态内容后，我遇到了一个不需要的多重调用函数的问题

HTML

<div class="wrap">
  <a href="javascript:;" class="addNewImage">add new image</a><br /><br /><br />
  <div id="fancyDIV">
      <a tabindex="1" rel="group" href="#" class="fancyLink" title="title 01"><img src="http://www.picssel.com/playground/jquery/images/01t.jpg" alt="t1" /><span>number1</span></a>
      <a tabindex="1" rel="group" href="#" class="fancyLink" title="title 02"><img src="http://www.picssel.com/playground/jquery/images/02t.jpg" alt="t1" /><span>number2</span></a>
  </div>
</div>

JS

$（“#fancyDIV”）.on（“focusin”，function（）{
$（'span'）。在（'click'，函数（e）上{
警报（0）；
});
}); // 在…上
var$indice=3；
$（“a.addNewImage”）。单击（函数（）{
如果（$indice>8）{
警报（'抱歉，没有更多图像要添加'）；返回false；
}否则{
$（“#fancyDIV”）。附加（“”）；
$indice++；
}
}); 

如果在加载后立即单击范围，则警报仅正确显示1次

如果我动态添加更多图片，然后单击最后一个跨距，它也会执行一次，这是正确的

但是如果我添加更多动态图片，并单击前一个span中的任何一个，这个警报会出现在我身上好几次。这不可能，因为在这一点上，最终不是发出警报，而是发送ajax请求。并向我发送了几十个相同的查询

我希望此警报只显示一次，无论我将添加多少新图片。可以吗

---

编辑（我想要的）：我想要动态加载组件，并能够单击它发送请求ajax。通常，这只适用于刚开始加载的项目，动态添加的项目不起作用。我可以通过focusIn实现这一点，但到那时，当我单击添加新项目时，ajax请求会被发送多次。但我只想发送一次请求。

您永远不希望像这样对

上的
进行嵌套调用。如果您删除了外部的
$（“#fancyDIV”）
，那么这几乎是正确的方法

这不起作用的原因是处理程序是在创建元素之前设置的。这意味着没有在这些元素上设置处理程序

有两种方法可以解决这个问题。创建新元素时，可以将处理程序添加到新元素中。就我个人而言，我更喜欢另一种方式，即将处理程序添加到某个祖先元素，但将其设置为在匹配某个CSS选择器的后代上运行。（这使用了DOM事件处理的所谓“冒泡”特性。）如下所示：

$('#fancyDiv').on('click', 'span', function(e) {
    alert(0);
});

单击
#fancyDiv
中的任何
元素时，这将运行处理程序

顺便说一句，使用CSS类或其他东西可能是明智的，因为以后可能会有更多的
元素添加到代码中。
每次您关注该div时，它们都会得到额外的单击事件。这就是你写的代码应该做的。你想让它做什么呢？那么正确的方法是什么呢？这取决于“正确的做法”是什么意思。为什么要在focusin上添加一个click事件？我正在动态加载图像，我想单击其中请求的元素ajax（在上面的示例中为警报（0））。如果我删除“on.focusin”。它只对正常加载的图像有效，但对动态添加的图像无效。我复制了警报（0），我只想被触发一次。还有一种绑定事件的方法，它可以截获点击事件到动态元素，而不必直接绑定到元素。（活动代表团）。只需删除click处理程序并将focusin事件更改为click事件。然后，您可以使用
e.target
获得单击的元素。您是一个天才。我确信，如果我想对动态添加的元素执行某些操作，我必须在使用真正的on（）之前使用“on（）。
$('#fancyDiv').on('click', 'span', function(e) {
    alert(0);
});