データ属性を変更した後にDOMをリフレッシュする方法

Question

静的ページを多くの言語に翻訳するには、CMSをほとんどコーディングしていません。動的に更新され、翻訳などが読み込まれますが、修正できないバグがいくつかあります。あなたは、ID 1のプレビューページにしようとすると、そのうちの一つですが、あなたは、ID 2のページを編集していた前に、それは常に、テンプレートの私のボタンのIDの2ページ

のプレビューにリダイレクト：

<div class="edit-template-container"> 
    //other code 
    <button id="a-preview" href="#" class="btn btn-block" target='_blank'> 
     Preview template 
    </button> 
</div> 

そして、それは新しいウィンドウでプレビューをロードする機能です：

：

$('#a-preview').on('click', function() { 
    var pageId = $('#language-choice-select').data('page-id'); 
    console.log(pageId); 
    window.open('/main/staticPages&staticPageId=' + pageId, '_blank'); 
}); 

それから私はそうにそのコードを変更し、イベントの委任に関するいくつかの記事を読んで、それは私の問題がある可能性が想定さしました

しかし、まだ編集されていた場合は、id2のページにリダイレクトされます。 DevTools Elementsでは、data-page-idが変更されていることがわかりますが、以前に編集された場合は、id： "2"のようにconsole.logが常に表示されます。

私はテーブルに編集するページを選択した場合、データ「のページ-ID」属性がそのように見える機能に、変更された：私は動的でページ-idデータ属性を変更するために何をすべきか

$('table').on('click', '.edit-table-btn', function() { 
    var pageId = $(this).data("page-id"); 
    //the rest of code 
    $('#language-choice-select').attr('data-page-id', pageId); 
}); 

DOM？私はこれについて何を知っているべきですか、そこに素晴らしい記事はありますか？

Answer 1

この既存のポストを参照してください：

基本的に

jQuery Data vs Attr?

、あなたがデータを使用するときに（）ノード上で、jQueryのは、ノードオブジェクトではなく、DOM要素に値を設定します。 したがって、attr（）を使用して値を設定して読み込むことをお勧めします。