您正在使用正确的语法绑定到文档，以侦听id=“test-element”的元素的单击事件。
它可能由于以下原因之一而无法工作：

• 未使用最新版本的jQuery
• 未将代码 Package 在DOM ready中
• 或者您正在执行某些操作，导致事件无法冒泡到文档上的侦听器。

若要捕获在声明事件侦听器后 * 创建的元素上的事件，应绑定到父元素或层次结构中较高的元素。
例如：

$(document).ready(function() {
    // This WILL work because we are listening on the 'document', 
    // for a click on an element with an ID of #test-element
    $(document).on("click","#test-element",function() {
        alert("click bound to document listening for #test-element");
    });

    // This will NOT work because there is no '#test-element' ... yet
    $("#test-element").on("click",function() {
        alert("click bound directly to #test-element");
    });

    // Create the dynamic element '#test-element'
    $('body').append('<div id="test-element">Click mee</div>');
});

在此示例中，仅触发“绑定到文档”警报。
JSFiddle with jQuery 1.9.1

你的代码应该可以工作，但是我知道这个答案对你没有帮助。你可以看到一个工作的例子here (jsfiddle)。
查询：

$(document).on('click','#test-element',function(){
    alert("You clicked the element with and ID of 'test-element'");
});

正如有人已经指出的，我们使用的是ID而不是类。如果页面上有多个元素具有ID，那么jquery将 * 仅返回具有该ID的第一个元素 *。不会有任何错误，因为这就是它的工作方式。如果这是问题所在，那么您将注意到click事件对第一个test-element有效，但对后面的任何一个都无效。
如果这不能准确地描述问题的症状，那么可能是您的选择器出错了。您的更新使我相信是这种情况，因为检查了一个元素，然后再次单击页面并触发了单击。可能导致这种情况的原因是，如果您将事件侦听器放在实际的document上，而不是test-element上。如果是这样，当你点击关闭文档并返回时（比如从开发者窗口返回到文档），事件将会触发。如果是这种情况，你也会注意到如果你点击两个不同的标签（因为它们是两个不同的document，所以你点击的是文档），点击事件会被触发。
如果这两个都不是答案，发布HTML将大大有助于解决这个问题。

一个老职位，但我喜欢分享，因为我有同样的情况下，但我终于知道了问题：
问题是：我们创建了一个函数来处理指定的HTML元素，但是与这个函数相关的HTML元素还没有创建（因为这个元素是动态生成的）。为了使它工作，我们应该在创建元素的同时创建这个函数。首先创建元素，然后创建与它相关的函数。
简单地说，一个函数只对在它之前创建的元素起作用，任何动态创建的元素都意味着在它之后。
但请检查未注意上述情况的样品：

<div class="btn-list" id="selected-country"></div>

动态附加：

<button class="btn-map" data-country="'+country+'">'+ country+' </button>

单击按钮，此功能工作正常：

$(document).ready(function() {    
        $('#selected-country').on('click','.btn-map', function(){ 
        var datacountry = $(this).data('country'); console.log(datacountry);
    });
})

型
或者你也可以用body这样的

$('body').on('click','.btn-map', function(){ 
            var datacountry = $(this).data('country'); console.log(datacountry);
        });

与此相比，不工作：

$(document).ready(function() {     
$('.btn-map').on("click", function() { 
        var datacountry = $(this).data('country'); alert(datacountry);
    });
});

我希望这会有所帮助

这是可行的：

<div id="start-element">Click Me</div>

$(document).on("click","#test-element",function() {
    alert("click");
});

$(document).on("click","#start-element",function() {
    $(this).attr("id", "test-element");
});

这是Fiddle

试试这个：

$("#test-element").on("click" ,function() {
    alert("click");
});

文档的方式也很奇怪。如果用于类选择器，这对我来说是有意义的，但是在id的情况下，你可能只是在那里进行了无用的DOM遍历。在id选择器的情况下，你会立即得到那个元素。

如果这段代码即使在文档就绪状态下也不起作用，很可能你在js文件的某个地方给那个按钮分配了一个return false;，如果是按钮，试着把它改为a，span，锚或者div，然后测试它是否起作用。

$(document).on("click","#test-element",function() {
        alert("click bound to document listening for #test-element");
});

$(document).on('click', '#test-element', () => { $('any class/id').hide(); });

• 你可以使用任何你想要的，而不是隐藏。