javascript - Unwanted propagation for event click with jquery inside spring application -

javascript - Unwanted propagation for event click with jquery inside spring application -

in spring project, have dashboard page can open every sub-page in application, of them opened in jquery-ui dialogs, mdi windows-like application. problem right that, after first click in link (which run normally), other clicks repeatedly executed, what's cause display of several windows (but 1 displayed, others titlebar displayed). code handle event , open jquery-ui dialog 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); homecoming 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 browser console (i testing in firefox , chrome) 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 go on raise number of calls click event handler.

anyone cann see what's going wrong here?

ps.: code called 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 issue somehow related how jsp handled within spring application, since here: http://jsfiddle.net/ryvab/ code works fine. source code application can found here: https://github.com/klebermo/blog.cms. can't figure out motive why code don't run when executed within spring application.

update 2

output of console after 3 clicks (note number of remove's - means close in 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

javascript jquery spring jquery-ui spring-mvc