Unwanted propagation for event click with jquery i

in my spring project, I have a dashboard page from where I can open every sub-page in my application, all of them opened in jquery-ui dialogs, like a MDI Windows-like application. My problem right now is that, after the first click in any link (which run normally), the other clicks are repeatedly executed, what's cause the display of several windows (but only one is completely displayed, all the others only the titlebar is displayed). The code for handle the event and open the jquery-ui dialog is that:

$( '.dialog' ).dialog({
      autoOpen: false,
      closeOnEscape: true,
      closeText: "fechar",
      height: 680,
      width: 1046,
      show: {
        effect: "fadeIn",
        duration: 1000
      },
      hide: {
        effect: "fadeOut",
        duration: 1000
      },
      close: function(){
          console.log('remove dialog_div');
          $(this).remove();
      }
});

function add_dialog(dialog_name) {
    console.log('=== add_dialog ===');
    console.log('dialog_name = '+dialog_name);
    $('#container').append('<div class="dialog" id="'+dialog_name+'"> <div class="text"> </div> </div>');
    var div = $('#'+dialog_name);
    return div;
}

function open_dialog(url, dialog_box) {
    console.log('=== open_dialog ===');
    $.ajax({
        type: "GET",
        url: url
    }).done(function(data){
        var $temp  = $('<div/>', {html:data});
        $(dialog_box).find('.text').empty();
        var content = $temp.find('head').html();
        console.log('content_head_section = '+content);
        $(dialog_box).find('.text').html( $temp.remove('head').html() );
        console.log('dialog_title = '+$temp.find('title').text());
        $(dialog_box).dialog('option', 'title', $temp.find('title').text());
        $(dialog_box).dialog( "open" );
    });
}

$(document).on('click', '.popup', function (event) {
    console.log('=== click_event_popup ===');
    event.preventDefault();
    event.stopPropagation();
    var action = $(this).data('action');
    var target = $(this).data('target');
    var div = add_dialog(target);
    open_dialog(action, div);
});

the output in the browser console (I am testing in firefox and chrome) is this:

first click

=== click_event_popup === page_link.js:81
=== add_dialog === page_link.js:56
dialog_name = popup-usuario page_link.js:57
=== open_dialog === page_link.js:64
content_head_section = undefined page_link.js:72
dialog_title = Usuario

second click

=== click_event_popup === page_link.js:81
=== add_dialog ===
dialog_name = popup-permissao
=== open_dialog ===
=== click_event_popup ===
=== add_dialog ===
dialog_name = popup-permissao
=== open_dialog ===
content_head_section = undefined
dialog_title = Permissao
content_head_section = undefined
dialog_title = Permissao

the consecutive clicks continue to raise the number of calls to the click event handler.

anyone cann see what's going wrong here?

ps.: this code is called from this jsp page:

<%@ include file="../include/header.jsp" %>

    <div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#">Project name</a>
        </div>
        <div class="collapse navbar-collapse">
          <ul class="nav navbar-nav">
            <li> <c:url value="/Usuario/listagem" var="usuario"/> <a href="#" class="popup" data-action="${usuario}/1/10/1" data-target="popup-usuario">Usu&aacute;rios</a></li>
            <li> <c:url value="/Permissao/listagem" var="permissao"/> <a href="#" class="popup" data-action="${permissao}/1/10/1" data-target="popup-permissao">Permiss&otilde;es</a></li>
            <li> <c:url value="/Grupo/listagem" var="grupo"/> <a href="#" class="popup" data-action="${grupo}/1/10/1" data-target="popup-grupo">Grupos</a></li>
            <li> <c:url value="/logout" var="logoutUrl"/> <a href="${logoutUrl}">Logout</a></li>
          </ul>
        </div><!--/.nav-collapse -->
      </div>
    </div>

    <div id="container"></div>

<%@ include file="../include/footer.jsp" %>

UPDATE

Seems the issue is somehow related to how the jsp is handled inside the spring application, since here: http://jsfiddle.net/ryVAb/ the code works fine. The source code for the application can be found here: https://github.com/klebermo/blog.cms. I can't figure out any motive why the code don't run when executed inside the spring application.

UPDATE 2

output of the console after three clicks (Note the number of remove's - which means close in this case):

=== click_event_popup === page_link.js:77
=== open_dialog === page_link.js:63
remove dialog_div
=== click_event_popup === page_link.js:77
=== open_dialog ===
=== click_event_popup ===
=== open_dialog ===
2
remove dialog_div
=== click_event_popup === page_link.js:77
=== open_dialog ===
=== click_event_popup ===
=== open_dialog ===
=== click_event_popup ===
=== open_dialog ===
=== click_event_popup ===
=== open_dialog ===
4
remove dialog_div
=== click_event_popup === page_link.js:77
=== open_dialog ===
=== click_event_popup ===
=== open_dialog ===
=== click_event_popup ===
=== open_dialog ===
=== click_event_popup ===
=== open_dialog ===
=== click_event_popup ===
=== open_dialog ===
=== click_event_popup ===
=== open_dialog ===
=== click_event_popup ===
=== open_dialog ===
=== click_event_popup ===
=== open_dialog ===
8
remove dialog_div