Jquery do something after chosen plugin finishes

Question

function mychosen(){
    $(".chosen-select").chosen();
    mytooltip();
}

function mytooltip(){

    $(".active-result").each(function () {
        $(this).attr("data-toggle","tooltip");
    });
}

$(document).ready(function () {
    mychosen();
});

.chosen() adds

 <ul><li>

items to the html. The li elements have a class "active-result". However, when I try to change them it doesn't work because my second function gets called before chosen has completed, so that piece of code doesn't work. How can I call my second function after chosen finishes?

Answer 1

So, the chosen plugin only adds the html after clicking the button. Hence why my code wasn't working. For anyone having similar issue in the future, this is what to do:

$(document).ready(function () {
    $(".chosen-select").chosen();
    $(".chosen-container").click(addtitles);
    // We need to execute the Jquery every time the button gets clicked.
});

Then in the function:

function addtitles(){

    var i = 0;

    $(".active-result").each(function () {
        $(this).attr("data-toggle","tooltip");
        $(this).attr("title",serializedResult[i]);
        $(this).attr("data-placement","right");
        $(this).parent().css("overflow","visible")
        $(this).tooltip();
        i++;
    });
}

Answer 2

function chosen()
{
//your code
flag = true;
}

function mychosen(){
    $(".chosen-select").chosen();
    if(flag) mytooltip();
    else //settimer 
}

function mytooltip(){

    $(".active-result").each(function () {
        $(this).attr("data-toggle","tooltip");
    });
}

//global varible
var flag = false
$(document).ready(function () {

    mychosen();
});