刷新的局部视图结果中的MVC 3不显眼的javascript链接

Question

我注意到如果你在可刷新的局部视图中添加一个不显眼的链接，例如

<a href="/" data-delete-chapter="@Model.Chapter.ChapterId" class="delete-chapter" >
    Delete
</a>

在javascript文件中连接以执行（不太丑陋）Jquery弹出删除确认）：

$("[data-delete-chapter]").each(function () {
    $(this).click(  ...

然后在通过ajax刷新局部视图时，这些javascript处理程序会出现异常，因此您最终必须刷新每个ajax调用。您可以使用OnSuccess AjaxOption执行此操作：或直接在html中执行data-ajax-success，例如我的页面上一个按钮：

<a data-ajax="true" data-ajax-loading="#chapterAjaxImage" data-ajax-method="GET"
data-ajax-mode="replace" data-ajax-update="#chapterContainer"
href="ScrollChapterPrev/@(Model.VideoId)?pageNumber=@(Model.PageNumber)"
data-ajax-success="afterChapterRefresh()" class="gallery-prev">
    <img src="@Url.Content("~/Content/Images/play/chapter-slider-prev.png")" alt="prev"     />
</a>

但是我觉得在刷新我的章节列表的多个地方有数据-ajax-success =“afterChapterRefresh（）”并不比使我的原始删除链接使用javascript更不引人注目，从而避免了引用刷新JS函数的需要：

<a href="javascript:deleteChapter(10)" class="delete-chapter" >
    Delete
</a> 

有没有更好的方式，或者我在这个特殊情况下能不能不引人注目？

Answer 1

通过ajax加载内容意味着，在事件（点击或其他）限制之后，您正在向DOM注入一些东西。因此新注入的元素不会具有该事件绑定。

jQuery on会有所帮助。 on将致力于当前元素和未来元素

改变这个

$("[data-delete-chapter]").each(function () {
     $(this).click(function(){
      //do something
     });
});

对此

$(document).on("click","[data-delete-chapter]"(function(){
  //do something
});