Question

我有一个功能，当它运行时，即时生成新标记...

$('.search input[type="image"]').on('click', function(){

    // Open directions in a map

    if($('#TXT_SAddr').val() === ''){
        return false;
        $('.directions .search').css('background' , '#ff0000'); 
    } else {

        var from = $('#TXT_SAddr').val();
        var to = $('.postal-code').html();
        var directions = 'http://maps.google.com/maps?saddr=' + from + '&daddr=' + to + '&output=embed';
        var modal = '<div class="apply-modal modal"><a class="close-apply-now" style="margin-bottom: 20px;"><img src="http://site.co.uk/images/closeModal.png" alt="Close" style="border-width:0px;"></a><div class="holder"><iframe src="'+directions+'" style="border:none; width:100%; height:500px;" border="0"></iframe></div></div>';

        $('body').prepend('<div class="modalOverlay"/>' + modal);

        $('.modal').animate({
                'opacity': 1,
                'top': '100px'
            }, 700, 'easeOutBack');

    }

    return false;

});

如果你能看到，上面会在类名为“close-apply-now”的情况下生成一个带有锚点的div。

我现在想要将一个函数绑定到此，我尝试使用...

$('a.close-apply-now').on('click', function(){
    alert('asdasd');
});

没有运气，任何人都可以看到我可能出错的地方？甚至我的警报都没有起作用。

Answer 1

由于动态添加close-apply-now div，您需要使用event delegation注册事件处理程序，如：

// New way (jQuery 1.7+) - .on(events, selector, handler)
$('body').on('click', 'a.close-apply-now', function(event) {
    event.preventDefault();
    alert('asdasd');
});

这会将click事件附加到body元素中具有 close-apply-now 类的任何锚点。

Answer 2

事件委派的语法略有不同。

事件需要绑定到dom中已存在的元素，而目标元素选择器需要作为第二个参数传递

$(document).on('click', 'a.close-apply-now', function(){
    alert('asdasd');
});

Answer 3

动态添加close-apply-now div。您必须添加selector参数，否则事件将直接绑定（不适用于动态加载的内容）而不是委托。见http://api.jquery.com/on/#direct-and-delegated-events

将您的代码更改为

$(document.body).on('click', '.update' ,function(){

jQuery集接收事件，然后将其委托给与作为参数给出的选择器匹配的元素。这意味着与使用live时相反，执行代码时必须存在jQuery集元素。

使用jQuery的live（）方法。描述：为现在和将来与当前选择器匹配的所有元素附加事件处理程序。

$("a.close-apply-now").live("click", function(){
  alert('asdasd');
});

Try Both in Jsfiddle

'.on'点击不运行功能？

3 个答案: