Jquery .on(） 方法不起作用

Jquery .on() method not working

本文关键字：方法 不起作用 on Jquery      更新时间：2023-09-26

小提琴

请看上面的小提琴。.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(( 中是否在 .on(( 中生成相同的元素(在本例中为 id="dyn_user_somerandnumber 的"div"(。但是我被.on((方法无法正常工作所困扰。如果听起来令人困惑，我很抱歉。

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

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

js小提琴示例

在绑定 click 事件时，[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/

相关文章：