Javascript 单击不在.each（）函数中工作的函数

我想使用click（）作为事件处理程序，但该事件处理程序不起作用。您可以看到下面的代码

    $('.ajax-close').click(function( event ){
        event.preventDefault();
        alert('hi');
        $( '.ajax-live-on' ).removeClass('ajax-live-on');
    });

我已经使用了所有的代码来初始化jquery。没问题，好的。但这段代码不起作用

这里是jsBin链接

$（'.ajax close'）

集合不包含绑定后接受该类的元素

改变

$('.ajax-close').click(function( event ){

到

您还应该将该绑定移到循环之外，没有理由在每次迭代时都这样做

还要注意的是，为了让您的跨度可点击，它必须有一些内容

---

（我添加jQuery库是为了让小提琴工作）

将jQuery库添加到HTML头部：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

---

在您的

给定链接中

您正在动态添加元素

，因此需要用于动态创建的元素事件绑定

$(document).on('click', '.ajax-close', function( event ){
  //your code
});

---

我猜，因为您使用的是ajax，所以在创建事件侦听器时不会创建

.ajax close

您将要委托您的单击功能：

$(document).on('click', '.ajax-close', function(event) {
    event.preventDefault();
    alert('hi');
    $('.ajax-live-on').removeClass('ajax-live-on');
});

这将有所帮助，但仅供参考，尤其是：

委派事件的优点是，它们可以处理来自子元素的事件，这些子元素将在以后添加到文档中。通过选择在附加委派事件处理程序时保证存在的元素，可以使用委派事件来避免频繁附加和删除事件处理程序。例如，该元素可以是模型-视图-控制器设计中视图的容器元素，如果事件处理程序希望监视文档中的所有冒泡事件，则可以是文档。文档元素在加载任何其他HTML之前都在文档的头部可用，因此可以安全地在那里附加事件，而无需等待文档准备就绪

---

一个选项是使用代理侦听

单击
事件，如下所示：

$(document).on('click', '.ajax-close', function( event ){
    //your code
});

另一个选项可能是将
click
侦听器移动到原始
click
侦听器中，从而创建“Close”按钮，而问题出现的原因是“ajax Close”上的
click
事件绑定得太快（甚至在
附加到DOM之前）：

ajaxcontent.单击（函数（事件）{
event.preventDefault（）；
$（'.ajax-live'）.addClass（'ajax-live-on'）；
$（此）。在（'Close'）之后；
$（'.ajaxshow'）.append（）.load（ajaxUrl）；
$（'.ajaxshow'）.addClass（'animated bounceInUp'）；
//将此部分移到此处，以前位于下方
$（'.ajax close'）。单击（函数（事件）{
event.preventDefault（）；
警报（“hi”）；
$（'.ajax-live'）.removeClass（'ajax-live-on'）；
});
});

确保在“ajax关闭”范围中包含一些内容，以便能够像“关闭”一词那样单击它。
问题出在哪里？你说的
不工作是什么意思？
这意味着不工作你忘了在你的项目中包括jquery库这主要是@muhaimin的复制品还有问题阻止你接受答案吗？这应该是一个注释。@这是一个注释，然后才是答案。好吧。。。这不应该是一个答案。作为评论，这当然是好的。
$(document).on('click', '.ajax-close', function( event ){
    //your code
});

ajaxcontent.click(function(event) {
    event.preventDefault();
    $( '.ajax-live' ).addClass('ajax-live-on');
    $( this ).after('<span class="ajax-close animated bounceInRight">Close</span>');
    $('.ajaxshow').append().load(ajaxUrl);
    $('.ajaxshow').addClass('animated bounceInUp');

    // Move this section here, which was previously located below  
    $('.ajax-close').click(function( event ){
        event.preventDefault();
        alert('hi');
        $( '.ajax-live' ).removeClass('ajax-live-on');
    });

});