javascript - jQuery - 在具有动态内容的函数中调用函数 (.load())

Question

我有一个网站，其中的内容是通过 jQuery .load() 动态加载的。遗憾的是，即使使用 .on()，我也无法从动态加载的内容中捕获事件。

这是我的函数，在加载 changeContent(2) 后，我无法触发 $("#control_right").on('click') 函数>:

function changeContent(step){
$('#content').toggle(100);
setTimeout(function() {
      $('#content').load("template/step_" + step + ".html");
}, 180);
$('#content').delay(300).toggle(200).queue(function(){

    if(step === 1){ // IF STEP 1. CHOOSE MALE OR FEMALE
        console.log("step1");
        $("#choice_man").on('click', function(){
            changeContent(2);
        });

        $("#choice_woman").on('click', function(){
            changeContent(2);
        });
    }

    if(step === 2){ // IF STEP 2. Do something else
        $("#control_right").on('click', function() {
            console.log("CLICK");
        });
    }
});
}

我希望我的问题是可以理解的。

Answer 1

尝试将 DOM 元素中的选择器更改为一个:

$(document).on('click', '#control_right', function(){...})

Bdw，为什么使用.delay(300).toggle(200)？

.load('url.html #loadContentFrom', function(){/* Callback function */})