Question

在加载动态内容后，我遇到了不需要的多重调用功能的问题。

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').on('click', function(e) {
        alert(0);
    });
}); // on 

var $indice = 3;
$("a.addNewImage").click(function(){
     if ($indice > 8) {
        alert('sorry, there are no more images to add'); return false;
     }else{ 
        $("#fancyDIV").append('<a tabindex="1" rel="group" href="#" class="fancyLink"><img src="http://www.picssel.com/playground/jquery/images/0'+$indice+'t.jpg" alt="thumb'+$indice+'" /><span>number'+$indice+'</span></a>');
        $indice++;
    }
});

JSfiddle

如果在加载后立即点击跨度，警报只会正确显示一次。

如果我动态添加更多图片，那么如果我点击最后一个跨度，它也会执行一次，这是正确的。

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

我希望此警报只出现一次，无论我将添加多少新照片。可以吗？

编辑（我想要的）：我想动态加载组件并能够点击它来发送请求ajax.Normally，这只适用于那些加载的项目一开始，对于动态添加的那些不起作用。我能够通过focusIn执行此操作，但到那时，ajax请求会在我单击以添加新项目时发送多次。但我只想发一次请求。

Answer 1

您永远不希望对此.on进行嵌套调用。如果您删除外部$("#fancyDIV")，那么几乎正确的方法。

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

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

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

当点击<span>中的任何#fancyDiv元素时，这将运行处理程序。

顺便说一句，使用CSS类或其他东西可能是明智之举，因为以后可能会有更多<span>元素添加到代码中。

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

1 个答案: