Javascript 触发委托自定义事件

我似乎根本无法触发这一事件。故事是这样的，我有一些动态添加内容的页面，我想在创建这些元素时将事件添加到这些元素中。（在

setup（）

之后）。但我似乎无法触发此自定义事件。我使用此自定义事件生成jquery ui滑块。这是我的密码：

function setup() {
    var determinant = $("#cat").text();
    $.post('../phpdatabase/setup.php', {
        categorija: determinant
    }, function(data) {
        $('#content').empty();
        $('#content').append(data);
    });
};



$(document).ready(function() {
    setup();
    $('body').on('click', '.colorbox', function() { //this works fine, .colorbox divs can be toggled on with clicks, they were dynamically added with setup()
        $(this).children().toggle();
    });
    $('body').on('myCustomEvent', '#slider-range', function() {
        alert("hye!"); //here I am to add some logic, but I just want an alert to work first. I can't seem to fire this event handler
    });
    $('body').trigger('myCustomEvent'); // I tried this, no luck.

});

我甚至在JSFIDLE中尝试过：

var setup(){
    $('body').append('<div id="slider-range"></div>');
}

$(document).ready(function() {
   setup();
   $('body').on('myCustomEvent', '#slider-range', function() {
  alert("hye!");
        });
   $('#slider-range').trigger('myCustomEvent');
})

var设置（）{
$（'body'）。追加（''）；
}
$（文档）.ready（函数（）{
设置（）；
$（'body'）。在（'myCustomEvent'，'#滑块范围'，函数（）上{
警惕（“hye！”）；
});
$（“#滑块范围”）.trigger（'myCustomEvent'）；
})

问题是因为您已委托自定义事件。您需要触发

#滑块范围

元素上的事件，以便它可以冒泡到

主体

并在那里被捕获：

$('#slider-range').trigger('myCustomEvent');

或者使用普通的事件处理程序，直接在

主体上触发当前的事件

$('body').on('myCustomEvent', function() {
    alert("hye!");
});

将回调添加到代码中，以便在动态创建的HTML绑定到页面时，可以将事件附加到它们

请参考下面的代码

    function setup(callback) {
        var determinant = $("#cat").text();
        $.post('../phpdatabase/setup.php', {
            categorija: determinant
        }, function(data) {
            $('#content').empty();
            $('#content').append(data);
        });
        callback(true);
    };


$(document).ready(function() {
    setup(function(data){
        //call event code
    });
});

奇怪的是，它们对我来说都很好：&我必须有
$（'body'）.on（'myCustomEvent'，'#slider-range0'，function（）{alert（“hye！”）；}）在这种情况下，使用我的第一个代码示例。您可以在上面的fiddle链接中看到，它工作得很好。但这确实适用于最初位于页面上的元素。我试过了。但是这个#slider-range0是动态添加的。我用一个静态元素尝试了这个，效果很好，就像这样。不是动态的，我不知道怎么做。