javascript - input onchange function calling not only on change -

so title states have dynamic form adds inputs dynamically , 1 of inputs dropdown on change calls val(this) function , call function when adds field when a.addspell on click function executed

$('div#championinput').on('click', 'a.addspell',function(){     var championname = $(this).closest(".champion").find(".championinput").val();     if($.inarray(championname, championswithextraspells)==-1){                 optionschampion = '\                    <option value="passive">passive</option>\                    <option value="q" selected>q</option>\                    <option value="w">w</option>\                    <option value="e">e</option>\                    <option value="r">r</option>'                    ;}             else{                 optionschampion = '\                     <option value="passive">passive</option>\                     <option value="q" selected>q</option>\                     <option value="q2">q2</option>\                     <option value="w">w</option>\                     <option value="w2">w2</option>\                     <option value="e">e</option>\                     <option value="e2">e2</option>\                     <option value="r">r</option>\                     <option value="r2">r2</option>';}     $(this).siblings('.spellchanges').append(     '<div class="spell" data-id="'+$(this).siblings("div.spellchanges").children("div.spell").length+'">\         <select name="change['+$(this).parent('div').data('id')+'][]" onchange="val(this)">\            '+optionschampion+'\         </select>\         <input type="text" name="championspell['+$(this).parent('div').data('id')+'][]" readonly>\         <br>\         <div class="change">\         <textarea type="text" size="20" rows="3" cols="50" maxlength="500" name="spelldescription['+$(this).parent('div').data('id')+'][][]" placeholder="enter description" required></textarea>\             <select name="spellchange['+$(this).parent('.champion').data('id')+'][][]">\                <option value="buff">buff</option>\                <option value="nerf">nerf</option>\                <option value="new">new</option>\                <option value="change">change</option>\                <option value="bugfix">bugfix</option>\             </select>\             <a href="#" class="addchange" onclick="return false;">add change </a>\             <a href="#" class="removespell" onclick="return false;">remove spell</a>\         </div>\     </div>\     ');     //alert($(this).siblings('div.spellchanges').children('div.spell').last().children('input').html()); }); 

alert($(this).siblings('div.spellchanges').children('div.spell').last().children('input')); i've tried target field have no idea how call on change (this) in it.

here html

<div id="wrap">  <form name="second_form" id="second_form" action="#" method="post">              <select id="season" name="season" onchange="checkseason();">         <option value="newseasons" selected>season 3+</option>         <option value="oldseasons">season 1, 2</option>     </select>     <input id="patch" type="text" name="patch" placeholder="e.g. 4.20" required autofocus><br/>     <a href="#" id="addchampion" onclick="return false;">add champion</a>         <div id="championinput">         </div>         <br><br>         <input type="submit" name="submit">     </form> </div>