jQuery: blur () olayından önce fire click ()

134

Otomatik tamamlama önerisi yapmaya çalıştığım bir giriş alanım var. Kod benziyor

<input type="text" id="myinput">
<div id="myresults"></div>

Girdi blur()olayında sonuçları 'div gizlemek istiyorum:

$("#myinput").live('blur',function(){
     $("#myresults").hide();
});

Girişime bir şey yazdığımda sunucuya istek gönderir ve json yanıtı alırım, ul-> li yapısına ayrıştırır ve bu ul'i div'e koyarım #myresults.

Bu ayrıştırılmış li öğesine tıkladığımda değeri li'den #myresultsinput'a ve div'ı gizlemek için değer ayarlamak istiyorum

$("#myresults ul li").live('click',function(){
     $("#myinput").val($(this).html());
     $("#myresults").hide();
});

Her şey yolunda gidiyor, ancak li olayıma tıkladığımda daha blur()önce tetikleniyor click()ve girişin değeri li'nin html'sini alamıyor.

click()Etkinliği daha önce nasıl ayarlayabilirim blur()?

jquery click onblur

— Egor Sazanovich
kaynak

Peki neden bulanıklaştırma fonksiyonunu kullanıyorsunuz? İhtiyacınız zaten tıklama işlevinden yerine getirildiğinde.

— Owais Iqbal

Bu muhtemelen etkinliklerinizin tetiklenme sırasını değiştirmez, ancak blurbir tıkladıktan sonra gerçekten tetikleniyorsa li, muhtemelen $("#myresults").hide()tıklama işleyicide yürütmeniz gerekmez . Görünen şey $(this).html()boş bir dize döndürmektir. Emin misin logyoksa alert $(this).html()emin misin?

— veeTrain

@OwaisIqbal bazen sonuç yok, bazen kullanıcı önerilerden bir şey seçmek istemiyor, bazen kullanıcı artık bu girişi kullanmak istemiyor, ancak kullanılmayan sonucu gizlemeliyim

— Egor Sazanovich

@veeTrain işleyicimde birçok eylem var, sorumu kolayca anlayabilmek için onları en aza indirdim. ps I kundakçı izlemedeki noktası eklemek için denedim blur()ve click()işleyicileri, sonra herhangi bir işlem yoktur blur()uçları

— Egor Sazanovich

Görünüşe göre fonksiyonları sıraya almanız gerekiyor. Bu sayfaya bir göz atmayı deneyin: stackoverflow.com/questions/1058158/… . İlk giren ilk çıkar (FIFO) kısmı size ait olabilir

— Patriotec

312

Çözüm 1

mousedownBunun yerine dinleyin click.

mousedownVe blurolaylar fare düğmesine bastığınızda arka arkaya meydana fakat clickonu serbest bıraktığınızda yalnızca oluşur.

Çözüm 2

Şunları yapabilirsiniz preventDefault()yılında mousedownodak çalmak açılan engellemek için. Küçük bir avantaj, fare düğmesi bırakıldığında değerin seçilmesidir, bu da yerel seçim bileşenlerinin çalışmasıdır. JSFiddle

$('input').on('focus', function() {
    $('ul').show();
}).on('blur', function() {
    $('ul').hide();
});

$('ul').on('mousedown', function(event) {
    event.preventDefault();
}).on('click', 'li', function() {
    $('input').val(this.textContent).blur();
});

— Alexey Lebedev
kaynak

12

Çözüm 1 aynı durumda benim için çalıştı! Kolay değişim! Teşekkür ederim :)

— Jon

Teşekkür ederim :) Ama tıklama yerine mouseown dinlemenin neden cazibe gibi çalıştığını açıklayabilir misiniz?

— Mudassir Ali

3

@MudassirAli çünkü mousedown olayı bulanıklıktan önce gelir ve sonra tıklama gelir. jsfiddle.net/f3BKP

— Alexey Lebedev

Çözüm # 1 bence daha iyi bir seçim. Basit ve etkili. Zaman aşımı, beklenmedik davranışlar için daha fazla kodlama + daha fazla alan anlamına gelir (zaman aşımı ne kadar sürer? Tıklamayı kaydedecek kadar uzun, ancak kullanımı karıştırmak için çok uzun değil ...).

— cw24

5

Çözüm # 2 dahice. Asla çözemedim! Teşekkürler

— Tobia

2

$(document).on('blur', "#myinput", hideResult);

$(document).on('mousedown', "#myresults ul li", function(){
     $(document).off('blur', "#myinput", hideResult); //unbind the handler before updating value
     $("#myinput").val($(this).html()).blur(); //make sure it does not have focus anymore
     hideResult(); 
     $(document).on('blur', "#myinput", hideResult);  //rebind the handler if needed
});

function hideResult() {
     $("#myresults").hide();
}

VAKTİNİ BOŞA HARCAMAK

— adeneo
kaynak

2

Bu sorunla karşılaştım ve mousedown benim için bir seçenek değil.

Bunu setTimeoutişleyici işlevini kullanarak çözdüm

        elem1.on('blur',function(e) {

            var obj = $(this);

            // Delay to allow click to execute
            setTimeout(function () {
                if (e.type == 'blur') {

                  // Do stuff here

                }
            }, 250);
        });

        elem2.click( function() {
            console.log('Clicked');
        });

— geckob
kaynak

2

Benzer bir soruyu daha yeni yanıtladım: https://stackoverflow.com/a/46676463/227578

Fareyle üzerine gelen çözümlere bir alternatif, belirli öğelerin tıklanmasının neden olduğu bulanıklaştırma olaylarını yoksaymasıdır (yani, bulanıklık işleyicinizde, belirli bir öğeyi tıklatmanın bir sonucu ise yürütmeyi atla).

$("#myinput").live('blur',function(e){
     if (!e.relatedTarget || !$(e.relatedTarget).is("#myresults ul li")) {
         $("#myresults").hide();
     }
});

— dule
kaynak

benim durumumda, event.relatedTarget null değerini döndürüyor, bunun neden olabileceği hakkında bir fikriniz var mı?

— gaurav5430

tamam, yanıtı burada bulabilirsiniz: stackoverflow.com/questions/42764494/…

— gaurav5430

0

Düğmesiz öğelere tıkladığımda fareli çözümler benim için çalışmıyor. İşte benim kod bulanıklık fonksiyonu ile yaptım:

.on("blur",":text,:checkbox,:radio,select",function() {
/*
* el.container 
* container, you want detect click function on.
*/
            var outerDir = el.container.find(':hover').last();
            if (outerDir.length) {
                if ($.inArray(outerDir.prop('tagName'), ["A","SELECT"] ) != -1 || outerDir.prop('type') == 'button' || outerDir.prop('type') == 'submit') {
                    outerDir.click();
                }
                if (outerDir.prop('type') == 'checkbox') {
                    outerDir.change();
                }
                return false;
            }
/*          
* YOUR_BLUR_FUNCTION_HERE;
*/
});

— Andriy
kaynak