Question

所以我有click函数，我在同一个div上调用了这个函数几次，所以基本上我有这种div：

<div id="upload_submit" class="upload_submit">Content</div>

我有两个click函数：

    //first function
    $('.upload_submit').click(function(){
        $(this).removeClass('upload_submit');
        $(this).addClass('upload_cancel');
    });
    //second one
    $(".upload_cancel").click(function(){
        alert('test')
    });

所以默认情况下我的div有upload_submit类我点击之后我将类更改为upload_cancel所以现在如果我再次点击我应该得到警报但由于某种原因它不会发生，什么可能是错的？

Answer 1

.bind()（.click是一个包装器）仅绑定到调用时存在的元素。但是，您正在动态更改类，这意味着当您尝试绑定它时，没有.upload_cancel要绑定。因此，您需要delegated event：

//first function
$(document).delegate('.upload_submit', 'click', function(){
    $(this).removeClass('upload_submit');
    $(this).addClass('upload_cancel');
});
//second one
$(document).delegate('.upload_cancel', 'click', function(){
    alert('test')
});

或者，如果您使用的是1.7+，则可以使用.on()语法：

//first function
$(document).on('click', '.upload_submit', function(){
    $(this).removeClass('upload_submit');
    $(this).addClass('upload_cancel');
});
//second one
$(document).on('click', '.upload_cancel', function(){
    alert('test')
});

这样做会将处理程序绑定到单击事件的document元素。然后它将检查触发元素是否与您传入的选择器匹配，如果是，它将调用您的处理程序。这意味着您可以添加和删除与提供的选择器匹配的元素，它仍然可以正确调用您的click事件处理程序，因为事件绑定到document而不是您的特定元素。

以下是此解决方案的jsFiddle示例。

有关详细信息，您可以开始阅读this article。

Answer 2

使用此处记录的jQuery .on（）函数： http://api.jquery.com/on/

这是必需的，因为该类在DOM就绪时不存在，但它在运行时添加。

希望这有帮助！

Answer 3

第二个事件监听器注册（$(".upload_cancel").click()）仅适用于在您调用.upload_cancel时与选择器click()匹配的元素。因此，如果您的div在单击之前没有该类，则该事件侦听器将不会注册到该类。你可以查看jQuery.live（）。

Answer 4

如果您使用的是至少v1.7，则可以使用.live

实现与.on相同的效果

$(document).on("click", ".upload_cancel", function(event){

这是在v1.7中添加的，其功能与.live相同，因此.live已弃用。

Answer 5

使用live的示例取决于最新版本的jQuery（1.7.1）中已弃用的代码。你应该改用它：

$('.upload-submit').on('click', function() {
    $(this).removeClass('upload-submit');
    $(this).addClass('upload-cancel');
});

$('.upload-cancel').on('click', function() {
    alert('test');
});

如果您的版本早于此版本，请使用delegate：

$(document).delegate('.upload-submit', function() {
    $(this).removeClass('upload-submit');
    $(this).addClass('upload-cancel');
});

$(document).delegate('.upload-cancel', function() {
    alert('test');
});

Jquery点击功能不起作用

5 个答案: