html - Why doesn't the jQuery event ".on" have any event argument -

the following code doesn't work :

var movedownbtnhtml = '<a href="#" class="movedown"> down </a>',      moveupbtnhtml = '<a href="#" class="moveup"> </a>';    function reloadbtns()  {     $(".cats .cat .moveup").add(".cats .cat .movedown").remove();     $(".cats .cat").children("input").after(movedownbtnhtml + moveupbtnhtml);     $(".cat:first-child .moveup").add(".cat:last-child .movedown").remove();  }    $( document ).ready(function() {     $(".cats").on('click', '.movedown .moveup', function(evt){        if(evt.target.attr("class") == ".movedown")        {           var = $(".cat").index(evt.target.parent()),               ctm = "<div class='cat'>"+$(".cat").eq(i).html()+"</div>";     					           $(".cat").eq(i).remove();           $(".cat").eq(i).after(contenttomove);                 reloadbtns();        }        else if(evt.target.attr("class") == ".moveup")        {           var = $(".cat").index(evt.target.parent()),               ctm = "<div class='cat'>"+$(".cat").eq(i).html()+"</div>";  							           $(".cat").eq(i).remove();  					           $(".cat").eq(i - 1).after(contenttomove);  					           reloadbtns();        }     });  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>  <h2>categories editor</h2>  <div class="cats">    <div class="cat"><input type="text" name="cate[]" value="category 1" readonly/><a href="#" class="movedown"> down </a></div>    <div class="cat"><input type="text" name="cate[]" value="category 2" readonly/><a href="#" class="movedown"> down </a><a href="#" class="moveup"> </a></div>    <div class="cat"><input type="text" name="cate[]" value="category 3" readonly/><a href="#" class="moveup"> </a></div>  </div>

it's in form make kind of database multiple categories wich contains data isn't important...

i don't know how pass event data information in argument know wich "button" actived event know if need category or if need down it. tested lot of methods decided you. have lost 2 days form!

i have seen on forum in [selector.on(trigger, selector, function(event){}] event argument contain jquery event. why doesn't work ?

how can ?

the problem had, compare class name dot on it, , after re-add links go or go down, don't assign event clicks. moved functionality of links function, after adding buttons, re-assign functionality new buttons. move up, code needed little fix, actual position should moved.

in jquery element launched event can access through "$(this)"

if i'm missing in answer comment, , i'll explain.

var movedownbtnhtml = '<a href="#" class="movedown"> down </a>',      moveupbtnhtml = '<a href="#" class="moveup"> </a>',      template = '<div class="cat"><input type="text" name="cate[]" value="category __number__"/></div>';    function reloadbtns()  {     $(".cats .cat .moveup").add(".cats .cat .movedown").remove();     $(".cats .cat").children("input").after(movedownbtnhtml + moveupbtnhtml);     $(".cat:first-child .moveup").add(".cat:last-child .movedown").remove();     assignevent();  }    function assignevent() {      $(".cats .movedown, .cats .moveup").on('click', function(){        var = $(this); //for precaution $(this) have object started event        if( that.attr("class") == "movedown")        {           var = $(".cat").index(that.parent());           contenttomove = "<div class='cat'>"+$(".cat").eq(i).html()+"</div>";           $(".cat").eq(i).remove();            $(".cat").eq(i).after(contenttomove);                reloadbtns();        }        else if(that.attr("class") == "moveup")        {           var = $(".cat").index(that.parent());           contenttomove = "<div class='cat'>"+$(".cat").eq(i).html()+"</div>";           $(".cat").eq(i).remove();           $(".cat").eq(i-1).before(contenttomove);  					           reloadbtns();        }     });  }    $( document ).ready(function() {     assignevent();           $('.addnew').click(function(e) {         e.preventdefault();         howmany = $('.cats').children().length;         newcat = template.replace(/__number__/, howmany+1);         $('.cats').append(newcat);         reloadbtns();     });  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>  <h2>categories editor</h2>  <div class="cats">    <div class="cat"><input type="text" name="cate[]" value="category 1" readonly/><a href="#" class="movedown"> down </a></div>    <div class="cat"><input type="text" name="cate[]" value="category 2" readonly/><a href="#" class="movedown"> down </a><a href="#" class="moveup"> </a></div>    <div class="cat"><input type="text" name="cate[]" value="category 3" readonly/><a href="#" class="moveup"> </a></div>  </div>  <a href="#" class="addnew">add new</a>