How to get an element that rendered after document ready?

Question

I have code like this:

// HTML
<div id="filter-option"></div>

//Javascript
$.ajax({
    method: "POST",
    url: "Some Url",
    data: {Some: "Data"}
}).done(funtion(msg){
    var result = JSON.parse(msg);
    renderFilterOption(result) // Some function to render elements to #filter-option
})

$("#myID").on('click', '.myClass', function(){
    var active = $("#ElementInFilterOption").attr("id");
    console.log(active);
})

When I console log active that contain and id of element that rendered after document ready, it return undefined . How to fix it?

Answer 1

Try like this:

// HTML
<div id="filter-option"></div>

//Javascript
$.ajax({
    method: "POST",
    url: "Some Url",
    data: {Some: "Data"}
}).done(funtion(msg){
    var result = JSON.parse(msg);
    renderFilterOption(result) // Some function to render elements to #filter-option

    $("#myID").on('click', '.myClass', function(){
        var active = $("#ElementInFilterOption").attr("id");
        console.log(active);
    })
})

By moving the click event handler inside the done() function, you will be adding the event handler to that element after it has been added to the DOM.

Answer 2

You should do this instead:

// Post request
$.ajax({
    method: "POST",
    url: "Some Url",
    data: {Some: "Data"}
}).done(funtion(msg){
    var result = JSON.parse(msg);
    renderFilterOption(result)
    $("#myID").on('click', '.myClass', function(){
        var active = $("#ElementInFilterOption").attr("id");
        console.log(active);
    })
})

$.ajax is a promise and they're asynchronous. What you did is synchronous. done() is a callback called after $.ajax is done. The code after $.ajax still proceeds even if $.ajax is not done yet.