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');
});

然后我读了一些关于事件委派的文章，并认为这可能是我的问题所以将代码更改为：

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

但如果以前编辑过，它仍会重定向到id 2的页面。在DevTools Elements中，我可以看到data-page-id被更改，但是console.log总是打印例如id：＆＃34; 2＆＃34;如果以前编辑过。

数据＆＃39; page-id＆＃39;当我在表格中选择要编辑的页面时，属性会发生变化，看起来像这样的函数：

$('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中动态更改page-id数据属性？我应该知道什么，有什么好文章吗？

Answer 1

请参阅现有的帖子：

jQuery Data vs Attr?

基本上，当您在节点上使用data（）时，jQuery会在节点对象上设置值，而不是在DOM元素上设置值。所以，我建议你使用attr（）来设置和读取值。

如何在更改数据属性后刷新DOM

1 个答案: