单击时按钮不会调用函数

Question

我想在单击按钮时运行一个函数。 当我在html体内这样处理时，它工作正常

<div type="button" id="decline" class="btn btn-danger mrs"></div> 

但是，我需要它在下面的代码块中工作，该代码块位于underscore.js包装器中。 目前使用以下功能无法执行，我想了解原因？ 在错误的地方是id？

$('#containerFriendsPending').empty();
_.each(friends, function(item) {
    var wrapper = $('<div class="portfolio-item-thumb one-third"></div>');
    wrapper.append('<div type="button" 
                         id="decline" 
                         class="btn btn-danger mrs">' + 
                   'Decline' + 
                   '</div>');
    $('#containerFriendsPending').append(wrapper);
});

Answer 1

自己解决了这个问题。

需要在原始问题主代码块中添加以下内容

$('.decline').click(function() {
Friendrequest_decline();
});

这样做有效。

$('#containerFriendsPending').empty();
    _.each(friends, function(item) {
    var wrapper = $('<div class="portfolio-item-thumb one-third"></div>');
    wrapper.append('<div type="button" id="decline" class="btn btn-danger mrs">' + 'Decline' + '</div>');
    $('#containerFriendsPending').append(wrapper);

$('.decline').click(function() {
Friendrequest_decline();
});

                                });

Answer 2

由于您没有提供启动click事件的代码，因此很难调试，但我将假设它实际上是导致此问题的最常见错误：您在元素实际存在之前绑定click事件。 这样，浏览器就不会知道新元素也需要click事件。

例：

$('.test').click(someFunction);
$('body').append( $('<div class="test">Click me!</div>');

这将不起作用，因为click事件首先被绑定，元素将在以后创建。

jQuery .on()函数可以通过查看在DOM中创建的新元素来处理它：

$('body').on('click', '.test', someFunction);
$('body').append( $('<div class="test">Click me!</div>');

现在它将成功运行someFunction 。

Answer 3

虽然您发布的代码解决方案将在第一时间运行：

$('#decline').click(function() {
    Friendrequest_decline();
});

根据您的回答，在替换包装代码后它将无法工作。 您必须使用.on()来委派事件：

$(document).on('click', '#decline', function() {
    Friendrequest_decline();
});

要么

$('#containerFriendsPending').on('click', '#decline', function() {
    Friendrequest_decline();
});

例如：

$（document）.on（'click'，'＃id'，function（）{}）vs $（'＃id'）。on（'click'，function（）{}）