Question

请看看上面的小提琴。 .on 方法似乎无法正常工作。我确定我必须遗漏一些明显的东西。

JS

var rand;
$('button').click(function(){
    rand = Math.floor((Math.random() * 100) + 1);
    $('#maindiv').append('<div style="cursor:pointer" id="dyn_user_'+rand+'">'+rand+'</div>');

});

$("[id^='dyn_user_']").on('click',function(event){  
    console.log('On method!');
    $('#maindiv').append('<div style="cursor:pointer" id="dyn_user_"'+rand+'">'+rand+'</div>');
});

我的主要目标是尝试查看.on（）是否有效，如果我在内部生成相同的元素（在这种情况下＆＃39; div＆＃39; id =＆＃34; dyn_user_somerandnumber＆＃34;）。上（）。但我坚持使用.on（）方法无法正常工作。如果这听起来令人困惑，我很抱歉。

Answer 1

在您绑定时，单击事件[id^='dyn_user_']不存在，因此没有任何约束。您必须将事件绑定到现有元素，然后使用过滤器才能使所需元素出现。像这样：

$(document).on('click',"[id^='dyn_user_']", function(event){  
    console.log('On method!');
    $('#maindiv').append('<div style="cursor:pointer" id="dyn_user_"'+rand+'">'+rand+'</div>');
});

工作小提琴：http://jsfiddle.net/v0u7yv2o/2/

Answer 2

您需要为动态添加的元素使用事件委派。因此，您应该使用以下语法绑定到现有元素：

$('#maindiv').on('click',"[id^='dyn_user_']",function(event){  
    console.log('On method!');
    $('#maindiv').append('<div style="cursor:pointer" id="dyn_user_"'+rand+'">'+rand+'</div>');
});

<强> jsFiddle example

Jquery .on（）方法不起作用

2 个答案: