Question

我似乎无法触发此事件。故事是，我有一些动态添加内容的页面，我想在制作这些元素时添加事件。（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.

});

我甚至在jsfiddle中试过这个：

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');
})

Answer 1

问题是因为您已委派自定义事件。你需要在#slider-range元素上触发事件，以便它可以冒泡到body并被抓到那里：

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

或者使用普通事件处理程序并直接在body上触发事件。

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

Answer 2

向您的代码添加回调，以便在动态创建的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
    });
});

触发委派的自定义事件

2 个答案: