jQuery click event stops working after added a loader to Vue object

Question

After adding a loading to my vue template, jquery does not seem to work anymore:

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

template:

<!-- 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>

I even have put the jquery part inside the mounted method:

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

But it still does not work.

Any ideas?

maybe this works `$(document).on('click','.cell-item a', function(event)` — Carsten Løvbo Andersen, Mar 13 '18 at 16:41
Don't bind with jquery if you are building with vue man. Use the view bindings. You can use delegate bindings to do this like the previous comment mentioned, but you are using a library to build your view that has logic to handle for this already. I highly suggest learning to use your library properly. — Taplar, Mar 13 '18 at 16:42
Because you are dynamically creating elements, and not binding on the new elements. — Taplar, Mar 13 '18 at 16:44
Possible duplicate of [Event binding on dynamically created elements?](https://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements) — Taplar, Mar 13 '18 at 16:45
@Taplar how do I convert that jquery block to vue binding then? — laukok, Mar 13 '18 at 16:45
It because the new elements is not a dom element, so they dont have the click events that you defined first — Carsten Løvbo Andersen, Mar 13 '18 at 16:45

Daniel Beck · Accepted Answer · 2018-03-13T19:21:36.553

2

There's no reason to be writing your event handlers in jQuery. Modifying the DOM externally to Vue will always be problematic, because Vue doesn't know about those modifications, so your event bindings and any other external changes will be thrown away whenever Vue needs to re-render that portion of the DOM.

If you're using Vue, use Vue.

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

...

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

edited Mar 13 '18 at 19:21

answered Mar 13 '18 at 17:25

Daniel Beck

16,972
5
29
49

Thanks for the answer! – laukok Mar 13 '18 at 17:31

jQuery click event stops working after added a loader to Vue object

1 Answers1