jQuery: ब्लर () ईवेंट से पहले फायर क्लिक ()

Question

मेरे पास एक इनपुट फ़ील्ड है, जहां मैं स्वत: पूर्ण सुझाव देने का प्रयास करता हूं। कोड जैसा दिखता है

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

इनपुट की blur()घटना पर मैं परिणाम div को छिपाना चाहता हूं:

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

जब मैं अपने इनपुट में कुछ लिखता हूं तो मैं सर्वर को रिक्वेस्ट भेजता हूं और json रिस्पॉन्स मिलता है, इसे ul-> li स्ट्रक्चर में पार्स करता हूं और इस ul को अपने #myresultsdiv में डालता हूं ।

जब मैं इस पार्स किए गए li एलिमेंट पर क्लिक करता हूं तो मैं ली से इनपुट और #myresultsडिव को छिपाने के लिए वैल्यू सेट करना चाहता हूं

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

सबकुछ अच्छा चल रहा है, लेकिन जब मैं अपने ली blur()ईवेंट पर क्लिक करता हूं तो आग लग जाती है click()और इनपुट की वैल्यू ली के एचटीएमएल से नहीं मिलती है।

मैं click()घटना को पहले कैसे सेट कर सकता हूं blur()?

Comments

तो इस मामले में आप ब्लर फ़ंक्शन का उपयोग क्यों करते हैं? जब आपकी आवश्यकता पहले से ही क्लिक फ़ंक्शन से भरी हो।

— ओवैस इकबाल

यह संभवत: उस क्रम को नहीं बदलेगा, जब आपकी ईवेंट फायरिंग कर रहे हैं, लेकिन यदि blurआप ए पर क्लिक करने के बाद वास्तव में फायरिंग कर रहे हैं li, तो आपको शायद $("#myresults").hide()क्लिक हैंडलर में निष्पादित करने की आवश्यकता नहीं है । ऐसा लगता है जैसे यह हो रहा है कि $(this).html()एक खाली स्ट्रिंग लौट रहा है । आप logया alert $(this).html()सुनिश्चित करने के लिए?

— वेटे्रेन

@OwaisIqbal कभी-कभी कोई परिणाम नहीं होता है, कभी-कभी उपयोगकर्ता सुझावों में से कुछ भी नहीं चुनना चाहते हैं, कभी-कभी उपयोगकर्ता इस इनपुट का उपयोग नहीं करना चाहते हैं, लेकिन मुझे अप्रयुक्त परिणाम को छिपाना होगा

— ईगोर सज़ानोविच

@veeTrain मेरे हैंडलर में कई क्रियाएं हैं, मैंने अपने प्रश्न में समस्या को समझने में आसानी के लिए उन्हें कम से कम किया है। ps मैंने blur()click()blur()

— फायरबग

ऐसा लगता है कि आपको फ़ंक्शन को पंक्तिबद्ध करने की आवश्यकता है। इस पृष्ठ पर एक नज़र डालने की कोशिश करें: stackoverflow.com/questions/1058158/… । फर्स्ट-इन-फर्स्ट-आउट (FIFO) भाग आपको प्राप्त हो सकता है

— पैट्रियटेक

Answer 1

समाधान 1

के mousedownबजाय सुनो click।

mousedownऔर blurघटनाओं एक के बाद एक होते हैं जब आप माउस बटन दबाएँ, लेकिन clickकेवल तब होता है जब आप उसे छोड़ दें।

समाधान २

आप कर सकते हैं preventDefault()में mousedownध्यान केंद्रित चोरी से लटकती ब्लॉक करने के लिए। मामूली लाभ यह है कि माउस बटन जारी होने पर मूल्य का चयन किया जाएगा, जो कि कैसे मूल चयन घटक काम करते हैं। 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();
});

Comments

समाधान 1 ने मेरे लिए इसी स्थिति में काम किया! आसान बदलाव! धन्यवाद :)

— जॉन

धन्यवाद :) लेकिन क्या आप बता सकते हैं कि चटका लगाने के बजाय मूसडाउन सुनना क्यों आकर्षण की तरह काम करता है?

— मुदस्सिर अली

@MudassirAli क्योंकि मूसडाउन इवेंट ब्लर से पहले आता है, और उसके बाद आता है। jsfiddle.net/f3BKP

— एलेक्सी लेब्डेव

समाधान # 1 मेरी राय में बेहतर विकल्प है। सरल और प्रभावी। टाइमआउट का मतलब अनपेक्षित व्यवहार के लिए कोड + अधिक कमरे में होगा (क्लिक आउट दर्ज करने के लिए कितना समय है? क्लिक को पंजीकृत करने के लिए पर्याप्त है, लेकिन उपयोग को भ्रमित करने के लिए बहुत लंबा नहीं ...)।

— cw24

समाधान # 2 सरल है। मुझे कभी नहीं लगा होगा! धन्यवाद

— Tobia

Answer 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();
}

बेला

Answer 3

मैंने इस मुद्दे का सामना किया और उपयोग करना mousedownमेरे लिए कोई विकल्प नहीं है।

मैंने setTimeoutहैंडलर फ़ंक्शन का उपयोग करके इसे हल किया

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

Answer 4

मैंने सिर्फ एक समान प्रश्न का उत्तर दिया: https://stackoverflow.com/a/46676463/227578

मूसडाउन सॉल्यूशंस का एक विकल्प यह है कि यह विशिष्ट तत्वों को क्लिक करने से होने वाली धब्बा घटनाओं को अनदेखा करता है (यानी, आपके ब्लर हैंडलर में, निष्पादन को छोड़ दें यदि यह किसी विशिष्ट तत्व को क्लिक करने का परिणाम है)।

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

Comments

मेरे मामले में, event.relatedTarget शून्य देता है, किसी भी विचार क्यों हो सकता है?

— गौरव ५३०

ठीक है, यहाँ जवाब मिला: stackoverflow.com/questions/42764494/…

— gaurav5430

Answer 5

जब मैं गैर बटन तत्वों पर क्लिक करता हूं तो मूसडाउन समाधान मेरे लिए काम नहीं करता है। तो यहाँ मैंने अपने कोड में ब्लर फंक्शन के साथ क्या किया है:

.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;
*/
});