CODEWITHSUNDEEP
javascriptjquery
user4790312
user4790312

Reputation:

Jquery get element created with ajax

after getting data from ajax and create <div> element i can not get id from created elements.for example:

My 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 in choose-video-id_'+value.id created by response ajax array now i'm try to set click on that to get id, my below code doesnt work

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

Upvotes: 0

Views: 1612

Answers (1)

Anoop Joshi P
Anoop Joshi P

Reputation: 25527

You are creating the elements dynamically. So a normal binding will not work here. You need to use delegates for this..

Also you can assign a data attribute to the elements like this,

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

Then you can get the value id like this,

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

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

Upvotes: 2

Related Questions