html - JQuery delegate multiples issue -

html - JQuery delegate multiples issue -

i have delegate jquery function of working each time click field increases number of times delegate function executes.

example: 3 field inputs, click one, delegate responds to, if click next field or same field function operates twice, , 3 times 3 times etc.

why happening , how can prevent this?

i have tried using return false on both parts, function , delegate function, has not helped @ all.

jsfiddle

the html

<div class="input-group marg_5"> <span class="input-group-addon">article title</span> <input id='new_vid_form_title' type="text" class="form-control vid_form" placeholder="article title" autocomplete='off'> <span class="input-group-addon"> <span id="new_vid_form_title_status" class="glyphicon glyphicon-asterisk orange pointer status_box" title="required field"></span> </span> </div> <div class="input-group marg_5"> <span class="input-group-addon">short desc.</span> <input id="new_vid_form_shortdesc_status" type="text" class="form-control vid_form" placeholder="short description" autocomplete='off'> <span class="input-group-addon"> <span id="new_vid_form_shortdesc_status" class="glyphicon glyphicon-asterisk orange pointer status_box" title="required field"></span> </span> </div> <hr /> <div class="input-group marg_5"> <span class="input-group-addon">youtube id</span> <input id="new_vid_form_youtubeid_status" type="text" class="form-control vid_form" placeholder="youtube video id | watch?v=' bit ' " autocomplete='off'> <span class="input-group-addon"> <span id="new_vid_form_youtubeid_status" class="glyphicon glyphicon-asterisk orange pointer status_box" title="required field"></span> </span> </div> <hr />

the jquery/js

function new_vid() { $("div").delegate("input","click",function(){ $('.vid_form').keyup( function() { alert('ddd'); }); }); }

so, although think you're using delegate here create sure code happens once, code contained within happens multiple times. clarify: every time click input contained within div, executes body of delegate function. result? attach keyup handler. click 2? attach keyup handler. click 3? same thing.

what have within function body binding keyup event without destruction of keyup event in future, multiple executions of event. you'd improve off doing this:

http://jsfiddle.net/notsoluckycharm/nydva/

$("div").delegate(".vid_form","keyup",function(){ alert('ddd'); });

now, delegate deprecated answered way you've presented it.

newer versions of jquery this

$("div").on("keyup",".vid_form",function(){ alert('ddd'); });

jquery html delegates