Question

如何将事件侦听器添加到按钮变量？当用户单击它们时，我尝试将喜欢和不喜欢的人数增加一个。

let result = '';
var like = '<button id="like">Like</button>';
var disLike = '<button id="disLike">Dislike</button>';
var flag = '<button id="flag">flag</button>';

result += '<ul>';
result += '<li style="padding:0;">Title: ' + data.title + '</li>';
result += '<li>' + data.story + '</li>';
result += '<li>Author: ' + data.Author + '</li>';
result += '<li>Author: ' + data.key + '</li>';
result += '<li>' + like + disLike + flag + '</li>';
result += '</ul>';

$('#stories').append(result);

});
});
var i = 0;
$('#like').click(function(i) {
  i++;
  alert(i);

});

Answer 1

您有两个选项可以在追加之后添加点击（注意：您应该具有唯一的ID，如果要添加的内容要多于一个类似的按钮，请改为使用类）

$('#stories').append(result).find('#button').click(function(i){
    i++;
    alert(i);
});

第二个选项是使用事件委托，您要使用on()函数将click添加到始终位于DOM（页面）中的元素中：

$('#stories').on('click', '.button', function() {
   i++;
   alert(i);
});

这将在您添加以下内容时起作用：

var like = '<button class="like">Like</button>';
var disLike = '<button class="disLike">Dislike</button>';
var flag = '<button class="flag">flag</button>';

Answer 2

您可以做的是先在内存中构造DOM，而不是立即将其放入append。这样，您可以在将处理程序放置在页面DOM上之前对其进行分配。

const html = '<ul><li><button id="like"></button></li></ul>'
const jQueryVersionOfHtml = $(html)

// Find element and attach handler
jQueryVersionOfHtml.find('#like').click(function() { ... })

// Then attach the HTML to the DOM
$('#stories').append(jQueryVersionOfHtml);

或者，您可以使用委托-一种表达“将处理程序放到祖先元素上”的好方法。在这种情况下，故事。这是通过jquery.on()实现的。

// Put a click handler on #stories for #like.
$('#stories').on('click', '#like', function(){ ... })

将事件添加到变量：

2 个答案: