como usar o on dentro do laço each()

[Mauricio Cabral 0]

(function($){

    alert("carreguei 2");
    // DEFINE BACKGROUND DO SLIDE
    (function($){
        $('.slider_item').each(function(){
            alert("carreguei 3");
            var sliderBg = $(this).attr('slider-bg');

            $(this).css({'background-image': 'url('+sliderBg+')'});

            var linkBanner = $(this).attr('link-banner');

            $(this).on("click", function(){
                alert(linkBanner);
                location.href = "./index.php?pagina=oc&banner="+linkBanner;
            });
                
        });
    }(jQuery));

 

pq o linkBanner está sempre pegando o valor do ultimo .slider_item, mesmo quando se clica nos outros elementos com seletor .slider_item?

 

o html 

 

<article id="1" class="slider_item active" slider-bg="img/banner/controle-de-pombos.png" link-banner="pombos">a</article>
                
                <article id="2"  class="slider_item" slider-bg="img/banner/dedetizacao.png" link-banner="dedetizacao">
                b</article>

                <article id="3"  class="slider_item" slider-bg="img/banner/desentupimento.png" link-banner="desentupimento">
                c
                </article>

                <article id="4"  class="slider_item" slider-bg="img/banner/desratizacao.png" link-banner="desratizacao">
                 d   
                </article>

                <article id="5"  class="slider_item" slider-bg="img/banner/hidrojateamento.png" link-banner="hidrojateamento">
                e
                </article>

                <article id="6"  class="slider_item" slider-bg="img/banner/antesedepois-caixadagua.png" link-banner="hidrojateamento">
                f
                </article>

                <article id="7"  class="slider_item" slider-bg="img/banner/limpeza-de-fossas.png" link-banner="hidrojateamento">
                g
                </article>
 

[angelorubin 142]

Pode tentar algo assim:

$(document).on('click', function(e){
  if($(e.target).hasClass('slider_item')){
    // seu código aqui
  }
})

Ou com event delegation

$(document).on('click', '.slider_item', function(){
	console.log(this)
})

 

[Mauricio Cabral 0]

Cara obg

mas o problema é com o slider como o slider_item está com position absolute somente o último elemento slider_item fica disponível(clicável).