Question

我正在尝试使用Barba来实现平滑的页面转换。这是我在添加新页面时添加一些HTML的代码。

Barba.Dispatcher.on('newPageReady', function(currentStatus, oldStatus, container) {  
  console.log("I am In.");
  $("#quick-share").append("Share Now!");
});

附加工作来自开发人员工具控制台，但是从这个函数内部来看并不是这样。但是，console.log（）语句正常工作没有任何问题。我也尝试过一种纯粹的JavaScript方法，但它在Barba函数中也没有。

document.getElementById("quick-share").innerHTML = "Share Now!";

我有什么遗失的东西吗？

感谢。

Answer 1

In fact with Barba.js when you make a transition, the new content will override the old one, that's what we can see in their How it works section:

5- As soon the new page is loaded, barba.js parses the new HTML (taking .barba-container) and puts the new content on the DOM inside #barba-wrapper.

6- The transition instance will take care of hiding the old container and showing the new one.

7- As soon the transition is finished, the old container is removed from the DOM.

So your problem is that when calling $("#quick-share"), in the 'newPageReady' event, the old content was removed so it won't return any element with that id, that's why you can't see the text appended.

What you can do is to recreate this element in the new container, in the transitionCompleted event handler.

无法将HTML附加到JavaScript中的元素或jQuery中的函数内部

1 个答案: