Question

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

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

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 */})

Answer 2

与stackoverflow中的许多其他答案一样（请在发布问题之前进行搜索），您必须使用on委托事件，而不仅仅是on()。

 $('#content').on('click', "#choice_man",function(){
       ...

在插入时将其委托给文档中最接近的静态父级是首选，而不是按性能文档本身

jQuery - 函数中的调用函数与动态内容（.load（））

2 个答案: