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.

What are you trying to accomplish? live is for elements that may be constructed after you call live, which is not very useful here because document only exists once at all times. In fact, without a selector live does not really do anything fancy anyway. — pimvdb
– pimvdb, Commented Feb 17, 2012 at 20:43
Well, have been learning with jQuery just for few last days, so I'm still noob in jQuery. As I wrote, this is just my last try, I am trying to accomplish having context menu working on AJAX loaded page. So far no success. — Erveron
– Erveron, Commented Feb 17, 2012 at 20:46

Rick Burns · Accepted Answer · 2012-02-17 20:45:08Z

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');
                }
            }
        });
    }
});

answered Feb 17, 2012 at 20:45

Rick Burns

1,54616 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Erveron Over a year ago

Nope, did not help. Behaviour is still the same :(

Erveron Over a year ago

Well, finaly proceeded...solved out by using one of context menu plugins I have tried before and main problem was not loading of #testtt...but the div with the menu. Still, this was helpful too, wouldnt figure this out without your answer. Thanks.

Collectives™ on Stack Overflow

jQuery context menu in AJAX loaded content

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related