Modal does not closes using jQuery due to VueJS

Question

In index.blade.php, I have this:

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

In app.js file there is this some code like this:

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

        methods: {
          // some methods
        },

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

Also, below in the same app.js file, there is this code:

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

When I click on the close button on the modal, it does not close. What could be the possible reason?

User 28 · Accepted Answer · 2018-07-11 17:57:41Z

1

I guess your span may be recreated by Vue then your listener will be gone. You can check the listener by right click on that element, choose Inspect. In Elements tab on you right (or bottom), choose Event Listeners tab. If it still there, may be it caused by other reasons.

By the way, I would recommend you to add event listener by using Vue instead.

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

And

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

answered Jul 11, 2018 at 17:57

User 28

5,1781 gold badge22 silver badges35 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Abhishek Over a year ago

Thanks. Just a few minutes ago, my friend solved this problem by moving jQuery code below the VueJs code. He found one more solution, the jQuery code is executed when the $(document) is ready. It's working fine now.

Yaniv Peretz · Accepted Answer · 2018-07-12 07:04:09Z

0

You could also move this into the mounted hook

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

so the event will be added only after vue reconstructed the html elements

answered Jul 12, 2018 at 7:04

Yaniv Peretz

1,1682 gold badges13 silver badges22 bronze badges

Collectives™ on Stack Overflow

Modal does not closes using jQuery due to VueJS

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related