单击按钮时不调用函数答案

【问题标题】：Button does not call function when clicked单击按钮时不调用函数
【发布时间】：2014-09-13 15:11:01
【问题描述】：

我想要一个在单击按钮时不运行的函数。当我在 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);
});

【问题讨论】：

函数在哪里调用？
@onetwo12 不用担心，我已经解决并回答了我自己的问题

标签： javascript jquery underscore.js

【解决方案1】：

虽然您发布的代码解决方案将在第一次工作：

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

【讨论】：

【解决方案2】：

自己解决了这个问题。

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

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

                                });

【讨论】：

请注意，您正在创建具有相同#decline id 的多个元素。一个 id 每页只能出现一次。
@isogram 所以我应该改用一个类？
是的，这就是他们发明的目的:)
@isogram 使用类的唯一问题，我不认为你可以同时使用两个类吗？根据我更新的答案，按钮现在有两个类？
可以，用空格隔开。请参阅class="btn btn-danger mrs"，它们已经是三个独立的类。只需在该列表中添加“拒绝”

【解决方案3】：

由于您没有提供启动 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。

【讨论】：