jQuery context menu in AJAX loaded content

Question

Well, after hours of trying to find something out, I have to ask here and probably again (I have found similar questions, but none of them helped me).

I am trying to use custom context menu on page that is dynamicly loaded via AJAX - everything with jQuery. Problem is that the context menu just does not work on dynamicly loaded page...no menu is shown after right click at all.

I have already found out that using .live() is a solution, but still can't get it working. Here is my last try with this ContextMenu plugin (using just sample code):

<script type="text/javascript">
    $(document).live("load", function() {
        $('#testtt').contextMenu('testtt', {
            bindings: {
                'open': function(t) {
                    alert('Trigger was '+t.id+'\nAction was Open');
                },
                'email': function(t) {
                    alert('Trigger was '+t.id+'\nAction was Email');
                },
                'save': function(t) {
                    alert('Trigger was '+t.id+'\nAction was Save');
                },
                'delete': function(t) {
                    alert('Trigger was '+t.id+'\nAction was Delete');
                }
            }
        })
    });

</script>
<div id="testtt">test</div>

This is the important path that is on the page that is loaded dynamicly.

I am also using jQuery UI Sortable, but that shouldn't by problem.

Thanks for every helpful solution.

Answer 1

Move your $('#testtt').contextMenu... call to your Ajax success() method like below. This will ensure that your context menu is hooked up AFTER your data is loaded and displayed on the screen. It should be the last thing in your Ajax success(). Alternatively it could go in Ajax complete().

$.ajax({
    type: 'GET',
    url: 'PATH TO URL',
    success: function(){
        $('#testtt').contextMenu('testtt', {
            bindings: {
                'open': function(t) {
                    alert('Trigger was '+t.id+'\nAction was Open');
                },
                'email': function(t) {
                    alert('Trigger was '+t.id+'\nAction was Email');
                },
                'save': function(t) {
                    alert('Trigger was '+t.id+'\nAction was Save');
                },
                'delete': function(t) {
                    alert('Trigger was '+t.id+'\nAction was Delete');
                }
            }
        });
    }
});