jquery - MVC: Button not firing click event in a tablecell -

edit - putting in more info answer. doing using autocomplete add items list;

   <section id="rightside" class="shrinkwrap" style="float: right;margin-top:10px;width:500px;">         <fieldset>             <legend>select other materials</legend>             <form method="get" action="@url.action("createothermaterials", "dataservice")"                   data-scd-ajax="true" data-scd-target="#othermateriallist">                 <p>select material: <input type="search" name="searchothermaterial" id="searchothermaterial" data-scd-autocomplete="@url.action("autocompleteothermaterial", "dataservice")" style = "width: 300px;" class="submitothermaterialselectionnew" data-scd-add-other-material="@url.action("addothermaterialnew", "dataservice")"/>                     @html.dialogformbutton("add new material", url.action("addmaterial", "popup"), "add new material", null, url.action("create"))                 </p>             </form>                @html.partial("_othermaterials", model.suppliermateriallist.where(x => x.primarymaterialflag == false).tolist())          </fieldset>     </section> 

so everytime item entered, list grows. wondering if problem script not pick latest updates page? partial view _othermaterials looks like

@model ilist<suppliermaterial>  <div id="othermateriallist" >     <p>these materials have been added supplier</p>     <table>         @html.displayformodel()     </table> </div> 

this grid uses displaytemplate below display rows of data;

@model suppliermaterial <tr>     <td>@model.material.materialname </td>     <td>         <form class="shrinkwrap" method="get" action="@url.action("removeothermaterial", "dataservice")">             <input type="button" value="remove" class="removeitem"/>             @html.hiddenfor(model => model.materialid)         </form>     </td> </tr> 

the form not overlap other. when user clicks on button code meant run;

$('.removeitem').click(function () {     alert("test");     var $form = $(this).closest("form");     var options = {         url: $form.attr("action"),         type: $form.attr("method"),         data: $form.serialize()     };      $.ajax(options).done(function (data) {         var $tr = $(this).closest("tr");         $tr.remove();     });      return false; }); 

however click event not captured code, , can't work out why

when working dynamic content has been added page on fly, event handlers click() not bound dynamically added selectors itself.

you should put code in delegate() or on() indside document load can handle future contents.

$('body').delegate('.removeitem', 'click', function(){ var $form = $(".shrinkwrap"); var options = {     url: $form.attr("action"),     type: $form.attr("method"),     data: $form.serialize() };  $.ajax(options).done(function (data) {     var $tr = $(this).parent("tr");     $tr.remove();  }); }); 

you can use more closer selector body make response more faster. use live('selector', function(){}); has been deprecated of jquery v1.9. hope helps.