javascript - Jquery 获取使用 ajax 创建的元素

Question

从ajax获取数据并创建<div>后元素我无法从创建的元素中获取 id。例如:

我的 Ajax:

$('[id^="view-category_"]').click(function () {
    var id = $(this).attr('id').split('_');
    var url = "{{ URL::route('get_category_videos') }}",
            category_id = id[1];
    $.ajax({
        type: "POST",
        url: url,
        data: {category_id: category_id},
        success: function (data) {
            $('#categories_video_list').html('');
            $.each(data, function( index, value ) {
                $('#categories_video_list').append('<div id="choose-video-id_'+value.id+'"'+value.subject+'</div>');
            });
            $('#videos_popup').show();
        }
    });
    return false;
});

value.id在choose-video-id_'+value.id由响应 ajax 数组创建，现在我尝试设置单击它来获取 id，我的下面的代码不起作用

$('[id^="choose-video-id_"]').on('click',function () {
    var id = $(this).attr('id').split('_');
    alert(id[1]);
});

Answer 1

您正在动态创建元素。所以正常的绑定(bind)在这里不起作用。您需要为此使用委托(delegate)..

您还可以像这样为元素分配数据属性，

'<div id="choose-video-id_' + value.id + '"' + value.subject + ' data-id="' + value.id + '"</div>',

然后你可以像这样获取值id，

$(document).on('click', '[id^="choose-video-id_"]', function () {

    alert($(this).data("id"));
});