Event click Owl-item just add

Asked

Viewed 11 times

0

Good afternoon guys, I have several owlcarousel2 while performing some test I noticed the following item or various items that are added to Carousel using the add.owl.carousel are not dectados in the Click Vent that follows below, if I update the page the click works normally, but when updating the page Carousel is filled with another event, but uses the same html structure, inspected the newly added items and saw nothing different. I’m new to jquery, I may have forgotten something important. The scripts are all at the bottom of the page. Someone has seen something similar?

My Carousel has this model, only within each item there is a structure.

<div class="owl-carousel owl-theme">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
</div>

Event click on a Carousel item

$('.owl-item').click(function() {
    $(this).addClass('marked');
    $(this).siblings('.owl-item').removeClass('marked');        
});

Function that inserts entries into the carousels, since they are 5. Insertion is successful.

function insertItemCarousel(DataItens, list){
    list.map((day) =>{
        let html = `
        <div class="item" data-id="${day}-${DataItens._id}">
            <div class="itens-Interno">
                <div class="imgdiv" >
                    <img class="img-fluid" src="${DataItens.image.replace(/"/g,"")}">                      
                </div>
                <div class="textdiv">
                    <a class="categoria">${DataItens.categoria}</a>
                    <h5 class="NomePrato">${DataItens.nomeprato}</h5>
                    <a class="descricao">${DataItens.descricao}</a><br>
                    <div class="botoesAction">
                        <button type="button">Excluir</button>
                        <button type="button">Editar</button>              
                    </div> 
                </div> 
            </div>
        </div>`;
    $(`.owl-carousel.${day}`).owlCarousel('add', html).owlCarousel('update');
    })  
}
  • Try using the event this way: $(document).on('click', '.owl-item', function() {

  • Vlw, that’s right, thank you. Answer the question I give you as the right answer.

  • Thanks! I will mark as duplicate even, because already had questions that addressed the same problem. Abs!

  • Oops no problem.

No answers

Browser other questions tagged

You are not signed in. Login or sign up in order to post.