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事件。这样，浏览器就不会知道新元素也需要点击事件。

示例：

$('.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(){})

单击时按钮不会调用函数

3 个答案: