使用jQuery .on（）将函数绑定到动态创建的元素

Question

我希望在将元素添加到DOM之前使用jQuery动态地将事件添加到元素上。

我一直这样做的方法如下：

var biggerHTML = '<div> <p class="click">Click</p> </div>';
$(body).append(biggerHTML);
$('.click').off('click, function);
$('.click').on('click, function);
// The reason I have the off is because I will be dynamically adding in these a few times.
// It may make more sense why I felt like I had to do it when you read the next example.

在将相同的函数添加到相同的选择器之前，我无法想象使用类'click'从所有'p'元素解除我的函数绑定。会发生什么事情，如果我有两个元素，我的函数将被绑定到第一个元素两次，如果我有三个元素，它会绑定三次。所以，每次点击它都会运行两到三次。我知道我可以计算DOM中“click”类的数量，然后当我再次添加我的元素时，给它一个count + 1的id然后绑定到id，但我想找到更接近以下内容的东西。 / p>

var button = '<p> Click </p>';
$(button).on('click', function);
var biggerHTML = '<div>' + button + '</div>';
$(body).append(biggerHTML);