将加载程序添加到 Vue 对象后，jQuery 单击事件停止工作答案

【问题标题】：jQuery click event stops working after added a loader to Vue object将加载程序添加到 Vue 对象后，jQuery 单击事件停止工作
【发布时间】：2018-03-13 16:40:32
【问题描述】：

向我的 vue 模板添加加载后，jquery 似乎不再工作：

var element = document.getElementById('vue-project')
  if (element !== null) {
    var getData = await axios.get('./data-project.json')
    var specimen = new Vue({
      el: '#vue-project',
      created() {
        setTimeout(() => {
          this.loading = false
        }, 1000)
      },
      data: {
        items: getData.data,
        loading: true
      }
    })
  }

$('.cell-item a').on('click', function(event) {
    event.preventDefault()
    consol.log(this)
    consol.log('I am clicked')
})

模板：

<!-- vue template -->
<div id="vue-project">

    <div v-if="loading" class="row row-loader" data-aos="fade-down">
        <div class="grid-x grid-padding-x align-center-middle text-center">
            <div class="cell small-4 text-center">
                <div class="spinner"></div>
            </div>
        </div>

    </div>

    <!-- vue - loop -->
    <template v-else v-for="item in items">

        <div class="row row-scale" data-aos="fade-up">
            <div class="grid-container">
                <div class="grid-x grid-padding-x grid-items">

                    <!-- loop projects in each item -->
                    <template v-for="(project, index) in item">
                    <div class="large-3 cell cell-item text-center">
                        <a href="#">
                            <img :src="project.image_src" :alt="project.image_alt">
                        </a>
                        <h2 class="heading-project">{{ project.title }}</h2>
                    </div>
                    </template>
                    <!-- loop project in each item -->

                </div>
            </div>
        </div>

    </template>
    <!-- vue - loop -->

</div>

我什至把 jquery 部分放在了mounted 方法中：

var element = document.getElementById('vue-project')
if (element !== null) {
    var getData = await axios.get('./data-project.json')
    var specimen = new Vue({
      el: '#vue-project',
      created() {
        setTimeout(() => {
          this.loading = false
        }, 1000)
      },
      data: {
        items: getData.data,
        loading: true
      },
      mounted () {
        $('.cell-item a').on('click', function(event) {
            event.preventDefault()
            consol.log(this)
            consol.log('I am clicked')
        })
      }
    })
}

但它仍然不起作用。

有什么想法吗？

【问题讨论】：

也许这行得通$(document).on('click','.cell-item a', function(event)
如果你使用 vue man 构建，不要绑定 jquery。使用视图绑定。您可以像前面提到的评论一样使用委托绑定来执行此操作，但是您正在使用库来构建您的视图，该视图已经具有为此处理的逻辑。我强烈建议学习正确使用您的图书馆。
Event binding on dynamically created elements?的可能重复
因为新元素不是dom元素，所以没有你先定义的点击事件
v1.vuejs.org/guide/events.html#ad

标签： jquery vue.js

【解决方案1】：

没有理由在 jQuery 中编写事件处理程序。将 DOM 从外部修改为 Vue 总是有问题的，因为 Vue 不知道这些修改，因此每当 Vue 需要重新渲染 DOM 的那部分时，您的事件绑定和任何其他外部更改都会被丢弃。

如果您使用的是 Vue，请使用 Vue。

<a href="#" v-on:click="foo">
    <img :src="project.image_src" :alt="project.image_alt">
</a>

...

methods: {
    foo() {
       // your click handler code here
    }
}

【讨论】：

感谢您的回答！