jQuery .on click事件并不总是在Ajax加载的内容上触发

Question

我有一个页面，可以动态加载内容。 在$(document).ready内部，我有类似的事件处理程序：

$(document).on("click", ".content_button", function(e){
    e.preventDefault();
    e.stopPropagation();
    // content
});

问题在于，鼠标单击只能识别大约90％的单击。 看来完全是随机的。 在其他时候，我必须按相同的按钮4-5次，然后它才能工作。 我在控制台中没有任何错误，即使CSS部分每次都能正常工作：

div.content_button:active {
    top: 2px;
}

我似乎找不到解决方案。 我使用的是jQuery 1.11，它在Win10，Win7，Firefox甚至是iPad或Android上都可以正常工作。

您对可能是什么问题有任何想法吗？

编辑 ：

data.control包含HTML中的.content_button div（按钮）。

这是加载按钮的部分：

    $.ajax({
        url:    'worker.php',
        async:  false,
        cache:  false,
        type:   "POST",
        data:   {   action:"update"   },
        dataType: "json",
        success:function(data) {
                    if(data.actionresult == 1)
                    {
                        $('div#container').hide("slide", { direction: "down" }, 500);
                        $('div#container').promise().done(function() {
                            $('div#container').html(data.control);
                            $('div#container').show();
                        });                    
                    }
                    else
                    {
                        // handle error
                    }
                }
    });

Answer 1

$(document).ready(function(){
$(".content_button").on("click",  function(e){
    e.preventDefault();
    e.stopPropagation();
    // content
});
});

必须这样做。

Answer 2

你试过了吗

$(function() {

   var count = 0;

   $('body').on('click', '.content_button', function() {
       count++;
       $('#count').html(count);
   });

});

https://jsfiddle.net/byexstpq/

Answer 3

好的，我发现了问题，是这样的：

div.content_button:active {
    top: 2px;
}

在mouseDown上，它移动了2个像素，因此有可能在mouseUp之后链接不会在那里-因此从技术上讲，当mouseUp发生在另一个元素上时，单击事件不会触发。

我希望这会帮助其他人。