Question

在index.blade.php中，我有这个：

<div id="books_listing" class="container">
    <div class="alert alert-success" role="alert">
        <p>Book suggestions has been enabled.</p>
        <span class="status-close"><b>&times;</b></span>
    </div>
</div>

在app.js文件中，有一些这样的代码：

if (document.getElementById('books_listing')) {
    const bookForm = new Vue({
        el: '#books_listing',
        data: {
          // some data
        },

        methods: {
          // some methods
        },

        mounted: function() {
          // something  
        }
    });
}

此外，在同一app.js文件的下面，有以下代码：

$('.status-close').on('click', function(){
    console.log('here');
    let wrapper = $(this).closest('.alert');
    wrapper.fadeOut(500);
});

当我单击模式上的关闭按钮时，它不会关闭。可能是什么原因？

Answer 1

我想您的span可能会被Vue重新创建，那么您的听众将消失。您可以通过右键单击该元素来检查侦听器，然后选择Inspect。在您右侧（或底部）的Elements标签中，选择Event Listeners标签。如果仍然存在，可能是其他原因造成的。

顺便说一句，我建议您改用Vue添加事件侦听器。

<div id="books_listing" class="container">
  <div class="alert alert-success" role="alert">
    <p>Book suggestions has been enabled.</p>
    <span class="status-close" @click='close'><b>&times;</b></span>
  </div>
</div>

和

new Vue({
  el: '#books_listing',
  methods: {
    close: function () {
      let wrapper = $(this.$el).find('.alert');
      wrapper.fadeOut(500);
    }
  }
})

Answer 2

您也可以将其移至已安装的挂钩中

mount（）{$（'。status-close'）。on（'click'，function（{ console.log（'这里'）; 让包装= $（this）.closest（'。alert'）; wrapper.fadeOut（500）; }）; }

因此仅在vue重构html元素后才添加事件

由于VueJS，模态无法使用jQuery关闭

2 个答案: