为什么语义Ui弹出窗口不起作用？

Question

我正在研究Laravel项目。我包含了一个SemanticUI弹出窗口，但是它不起作用，并且出现了JavaScript错误：

  

弹出式窗口：您指定的目标或弹出式窗口在页面上不存在

我使用了名为... import { BrowserRouter as Router, Route, Switch} from "react-router-dom"; import { Provider } from 'react-redux' import store from './store' const App = () => { return ( <Provider store={store}> <Router> <Switch> <Route exact path='/' component={Home} /> <Route exact path='/about' component={About} /> <Route exact path='/login' component={Login} /> <Route exact path='/register' component={Register} /> </Switch> </Router> </Provider> ); } export default App; 的弹出代码视图，并将其包含在Laravel索引页面中。

弹出式窗口：

popup.blade.php

JavaScript：

<div class="ui fluid popup bottom left transition hidden" style="top: 551.634px; left: 0.994324px; bottom: auto; right: auto; width: 614.659px;">
  <div class="ui four column relaxed divided grid">
    <div class="column">
      <h4 class="ui header">Fabrics</h4>
      <div class="ui link list">
        <a class="item">Cashmere</a>
        <a class="item">Linen</a>
        <a class="item">Cotton</a>
        <a class="item">Viscose</a>
      </div>
    </div>
  </div>

索引：

$(document).ready(function() {
  $('.grid-cell').popup({
    inline: true,
    hoverable: true,
    popup: '.special.popup',
    position: 'bottom left',
    delay: {
      show: 300,
      hide: 800
    }
  });
});