Question

我想使用click（）作为eventhandler并且该事件处理程序不起作用你可以看到下面的代码

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

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

这是jsBin链接

http://jsbin.com/doxeravizo/1/edit?html,css,js,output

Answer 1

$('.ajax-close')集合不包含绑定后获取该类的元素。

更改

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

到

$(document.body).on('click', '.ajax-close', function( event ){

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

另请注意，为了让您的跨度可以点击，它必须包含一些内容。

Demonstration（我添加了jQuery库以使小提琴工作）

Answer 2

我猜测，因为您正在使用ajax，因此在创建事件侦听器时不会创建.ajax-close。

您想要委派点击功能：

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

This article会有所帮助，但仅供参考，特别是这一点：

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

Answer 3

一种选择是使用委托来监听click事件，如下所示：

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

另一种选择可能是将click侦听器移动到原始click侦听器中，从而创建＆＃34;关闭＆＃34;按钮，而问题出现的原因是＆＃34; ajax-close＆＃34;上的click事件。绑定太快（甚至在<span>附加到DOM之前）：

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

});

确保在＆＃34; ajax-close＆＃34;中加入一些内容。 span可以像单词＆＃34; Close＆＃34;。

一样点击它

Answer 4

将JQuery库添加到HTML头：

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

Answer 5

在given link您要添加元素dynamically，因此需要使用event delegate来动态创建元素事件绑定。

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

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

5 个答案: