JQuery initialisieren dynamisch

Question

ich die folgenden Teilansicht haben

<tr> 
<td> 
    <input type="hidden" name="InspectionQuestionAnswers.Index" value="@Model.GenID"> 
    @Html.Hidden("InspectionQuestionAnswers[" + Model.GenID + "].GenID", Model.GenID, new { id = "InspectionQuestionAnswers_" + Model.GenID + "__InspectionQuestionID" }) 
    @Html.Hidden("InspectionQuestionAnswers[" + Model.GenID + "].ID", Model.ID, new { id = "InspectionQuestionAnswers_" + Model.GenID + "__InspectionQuestionID", @class = "form-control" }) 
    @Html.Hidden("InspectionQuestionAnswers[" + Model.GenID + "].InspectionTemplateQuestionID", Model.InspectionTemplateQuestionID, new { id = "InspectionQuestionAnswers_" + Model.GenID + "__InspectionQuestionID", @class = "form-control" }) 
    @Html.TextBox("InspectionQuestionAnswers[" + Model.GenID + "].Answer", Model.Answer, new { id = "InspectionQuestionAnswers_" + Model.GenID + "__InspectionQuestionID", @class = "form-control" }) 
</td> 
<td question_type="row_default"> 
    @Html.TextBox("InspectionQuestionAnswers[" + Model.GenID + "].Identifier", Model.Identifier, new { id = "InspectionQuestionAnswers_" + Model.GenID + "__InspectionQuestionID", @class = "form-control" }) 
</td> 
<td question_type="row_default"> 
    @Html.CheckBox("InspectionQuestionAnswers[" + Model.GenID + "].ForcePhoto", Model.ForcePhoto, new {id = "InspectionQuestionAnswers_" + Model.GenID + "__InspectionQuestionID", @class = "checkbox checkbox-inline"}) Require Proof 
</td> 
<td question_type="row_stock"> 
    @Html.TextBox("InspectionQuestionAnswers[" + Model.GenID + "].MinStock", Model.MinStock, new { id = "InspectionQuestionAnswers_" + Model.GenID + "__InspectionQuestionID", @class = "form-control" }) 
</td> 
<td> 
    <a class="btn btn-danger pull-right ajax-remove" href="@Url.Action("DeleteAnswer")/@Model.ID">Delete</a> 
</td> 

Diese Teilansicht ist eine Tabelle Ajax hinzugefügt werden. aber dann ajax-remove die Klasse nicht einmal initialisiert, obwohl ich es in der folgenden Funktion gesetzt haben $(document).ready(function()

Hier ist die Ajax-Methode

 $(".ajax-remove").on("click", function (e) { 
      e.preventDefault(); 
      var sender = $(this).closest('tr'); 
      var elementUrl = $(this).attr('href'); 
      $.ajax({ 
       url: elementUrl, 
       cache: false, 
       success: function (data) { 
        sender.remove(); 
       } 
      }); 
     }); 

Die oben Ajax nie passiert, ist es einfach nur auf die URL umleitet als weiße Seite.

Wie kann ich sicherstellen, dass, wenn ich dynamisch HTML der Seite hinzufügen, dass die jquery Methoden/listners

Answer 1

initialisiert werden als Ihre HTML dynamisch über Ajax-Aufruf auf Fly generiert wird, müssen Sie delegated event:

$(document).on("click",".ajax-remove", function (e) { 
      e.preventDefault(); 
      ............ 
      ............ 
     }); 

Sie können das nächstliegende übergeordnete Element verwenden, das für eine bessere Leistung anstelle von document im DOM-Laden verfügbar ist.