Call ajax from dynamic generated tag and fetch value from ajax

I have fetched data from ajax like

var audioLength;
                   var ul_ul_li_a = document.createElement('a');
                ul_ul_li_a.setAttribute('class', 'dropdown-toggle');
                ul_ul_li_a.setAttribute('href', '#');
                ul_ul_li_a.innerHTML = "Audios";
                ul_ul_li_a.setAttribute('id', tr_job_room);
                if (audioLength > 0) {
                    alert("audiolength"+audioLength);
                    $(ul_ul_li_a).on('click', function () {
                        alert(audioLength+"sdasds");
                        varid = this.id;
                        audiosPlay(varid);
                        scriptpanel();
                        getTxtData();
                    });
                }

and ajax is:

    // DISPLAY GROUPS DATA
function getGroupsData(arg) {
    $.ajax(
    {
        type: "POST",
        url: '@Url.Action("getGroupsData")',
        dataType: "json",
        mtype: "post",
        data: { arg: arg },
        async: true,
        success: function (data) {
            audioLengh = data.groups[0].audio.length;
            alert(audioLengh + "Sda");
            // activeClass(arg);
            imageDisplay(data.groups[0].image.length, data.groups[0].image);
            audioDisplay(arg, data.groups[0].audio.length, data.groups[0].audio);
        }
    });
}

Is it correct way to fetch data..I am not getting audioLength value in if block..please correct me