2

次のような更新可能な部分ビューに目立たないリンクを追加すると、

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

（醜い）Jqueryポップアップ削除確認を行うためにjavascriptファイルに接続されています）：

$("[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>

ただし、チャプターリストを更新する複数の場所にdata-ajax-success = "afterChapterRefresh（）"を配置することは、元の削除リンクでjavascriptを使用するよりもそれほど目立たないため、更新JS関数を参照する必要がないように感じます。

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

より良い方法はありますか、それとも私はこの特別な場合に得ることができるのと同じくらい目立たないように近づいていますか？

4

1 に答える 1

4

ajaxを介してコンテンツをロードするということは、イベント（クリックなど）が制限された後、DOMに何かを注入していることを意味します。したがって、新しく挿入された要素には、そのイベントバインディングはありません。

jQueryonが役立ちます。onは現在の要素と将来の要素で機能します

これを変える

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

これに

$(document).on("click","[data-delete-chapter]"(function(){
  //do something
});
于 2012-06-12T01:01:07.487 に答える