jquery stopImmediatePropagation does not prevent event from executing function twice -
my problem code gets executed twice. have textarea pops jquery dialog(when dot typed).
$('#mytext').keydown(function(e){handlekeys(e);}); function handlekeys(e){ if(e.keycode == 190){openintelli(e,null);}} when user keeps typing keys, listened widget of dialog with
widget.unbind('keypress'); widget.on('keypress',function(event) {event.stopimmediatepropagation();rearrangeintelli(event);}); in rearrangeintelli, dialog closed, key typed inserted in teaxtarea, intelli dialog box opened again openintelli()
function rearrangeintelli(event){ console.log('rearrangeintelli'); //event.stopimmediatepropagation(); tried put here, no effect //alert('key:'+event.which); var key=string.fromcharcode(event.which); closeintelli(); inserttextatcursor(key); openintelli(event,key); } it works fine, untill want close dialog: if(key=='k'){closeintelli();}
then closes , inserts last key again, , that's not want. tried stop event.stopimmediatepropagation(); in possible places. after closeintelli, returns widget.keypress(function.., end of rearrangeintelli , id adds key.
i have no idea how stop this. roaming little bit in jquery side, seems wants return result of rearrangeintelli function again.but have no idea stop executing inserttextatcursor() twice.
below full code. can 1 please give me hint. have stoppropagation, or need somewhere else. lot help, jenita
<script type="text/javascript" src="/js/jquery.1.11.0.min.js"> </script> <link rel="stylesheet" href="/js/jquery.1.11.1.ui.smoothness.css" /> <script> $(function() { $('#mytext').keydown(function(e){handlekeys(e);}); $("#intelli" ).dialog({autoopen:false}); $("#intelli" ).dialog({ width: 700,maxheight:500 }).css({ "font-size": "18px", "font-family":"times new roman" } ); $("#intelli").dialog("option","title","properties , methods"); }); function handlekeys(e){ if(e.keycode == 190){openintelli(e,null);}} function openintelli(event,key){ console.log('openintelli'); var intelli=$('#intelli'); /// intelli dialog $("#intelli" ).dialog("open"); $("#intelli").dialog('option','position',{my: "left top",at: "right top",of: event.target}); var widget=$('#intelli').dialog('widget'); widget.unbind('keypress'); widget.on('keypress',function(event){event.stopimmediatepropagation();rearrangeintelli(event);}); widget.focus(); if(key=='k') { console.log('from openintelli:close'); closeintelli(); } } function closeintelli(){ console.log('closeintelli'); $("#intelli").dialog("close"); } function rearrangeintelli(event){ console.log('rearrangeintelli'); //event.stopimmediatepropagation(); //alert('key:'+event.which); var key=string.fromcharcode(event.which); closeintelli(); inserttextatcursor(key); openintelli(event,key); } function inserttextatcursor( text) { var el=$('#mytext')[0]; console.log('inserttextcursor:'+text); var val = el.value, endindex, range; if (typeof el.selectionstart != "undefined" && typeof el.selectionend != "undefined") { endindex = el.selectionend; } console.log('endindex:'+endindex); el.value = val.slice(0, endindex) + text + val.slice(endindex); el.selectionstart = el.selectionend = endindex + text.length; } </script> <textarea id='mytext'></textarea> <div id='intelli'>hello there</div>
in current code, when k pressed, handled keypress handler widget. closes dialog, adds k textarea, , re-opens dialog calling openintelli(). of course, when k passed openintelli(), closes dialog right away.
if understand correctly, not want k added textarea. in case, check key in keypress handler widget. if key k, not add textarea , not re-open dialog.
however, not think necessary close , re-open dialog each key. here code may work you. see comments in code:
$(function() { function inserttextat(el, text, pos) { if (typeof pos != 'undefined') { var val = el.value; el.value = val.slice(0, pos) + text + val.slice(pos); el.selectionstart = el.selectionend = pos + text.length; } else { el.value += text; el.selectionstart = el.selectionend = el.value.length; } } function instrumentintelli($textarea) { // create closure variable textarea cursor position. var pos; // create dialog element , instrument dialog. var $dialog = $('<div></div>').dialog({ autoopen: false, title: 'properties , methods', width: 250, maxheight: 100, position: { my: 'left top', at: 'right top', of: $textarea[0] } }).css({ 'font-size': '18px', 'font-family': 'times new roman' }); $dialog.dialog('widget').keypress(function(event) { var key = string.fromcharcode(event.which); if (key != 'k') { // in browsers moves focus textarea. inserttextat($textarea[0], key, pos); // update cursor position variable. pos = $textarea[0].selectionend; // move focus widget. $dialog.dialog('widget').focus(); } else { $dialog.dialog('close'); // since dialog remain closed, want move // focus textarea, want delay until // after keyup event finished or else textarea // keypress event key. settimeout(function() { $textarea.focus(); $textarea[0].selectionstart = $textarea[0].selectionend = pos; }, 0); } }); $textarea.keydown(function(event) { if (event.keycode == 190) { // set cursor position variable before opening // dialog , moving focus textarea. pos = $textarea[0].selectionend; // open dialog , move focus widget. $dialog.dialog('open').dialog('widget').focus(); } }); } instrumentintelli($('#mytext')); }); notice <div> dialog created dynamically.