Question

I’m using the example here to add menus to my website. In the original HTML there is a div with this menu inside of it. I invoke the circleMenu effect on it.

            <ul id="container" >
            <li class="ui-state-default">example1
                <!--menu button-->
                <ul class="menu" id="menu6">
                    <li><a href="#"></a></li>
                    <li><a href="#" alt="Edit" title="Edit"><img src="images/edit.jpg" /></a></li>
                    <li><a href="#" alt="Copy" title="Copy"><img src="images/copy.jpg" /></a></li>
                    <li><a href="#" alt="Delete" title="Delete"><img src="images/delete.jpg" /></a></li>
                </ul>
            </li>
        </ul>

                $('.menu').circleMenu({
                direction: 'right',
                circle_radius: 80,
                item_diameter: 20,
                trigger: 'click'
            });

Now, at some other place in the page, I create the example2 list item, and the same menu. Except this time, the circleMenu effect will not be attached to it, because it was just created. How do I apply the effect immediately after creation? or modify the existing call to use all current ‘.menu’ items as of that moment?

Answer 1

Use jquery .on()

$('.menu').on("load", data, function(event){
    $('.menu').circleMenu({
         direction: 'right',
         circle_radius: 80,
         item_diameter: 20,
         trigger: 'click'
    });
});

You can pass data in the second argument, or simply set it to null.