jQuery: অস্পষ্ট () ইভেন্টের আগে ফায়ার ক্লিক করুন ()

Question

আমার একটি ইনপুট ক্ষেত্র রয়েছে, যেখানে আমি স্ব-পরিপূর্ণ পরামর্শ দেওয়ার চেষ্টা করি। কোডটি দেখে মনে হচ্ছে

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

ইনপুট blur()ইভেন্টে আমি ফলাফলের ভাগটি গোপন করতে চাই:

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

আমি যখন আমার ইনপুটটিতে কিছু লিখি তখন আমি সার্ভারের কাছে অনুরোধটি প্রেরণ করি এবং জেসন প্রতিক্রিয়া পাই, এটি উল-> লি কাঠামোর মধ্যে পার্স করে এবং এই উলটিকে আমার #myresultsডিভিতে রাখি ।

আমি যখন এই পার্সড লি উপাদানটিতে ক্লিক করি তখন আমি লি থেকে ইনপুট এবং #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()নিশ্চিত করতে পারেন?

— veeTrain

@ ওয়েসইকবাল কখনও কখনও কোনও ফলাফল পান না, কখনও কখনও ব্যবহারকারী পরামর্শ থেকে কোনও কিছুই নির্বাচন করতে চান না, কখনও কখনও ব্যবহারকারী এই ইনপুটটি আর ব্যবহার করতে চান না, তবে আমার অব্যবহৃত ফলাফলটি অবশ্যই আড়াল করতে হবে

— এগার স্যাজনোভিচ

@ ওয়েভট্রেইন আমার হ্যান্ডলারগুলিতে অনেকগুলি ক্রিয়া রয়েছে, আমি আমার প্রশ্নে সমস্যাটি সহজেই বুঝতে পেরেছি just PS আমি ফায়ারব্যাগে blur()এবং click()হ্যান্ডলারে ওয়াচ-পয়েন্ট যুক্ত করার চেষ্টা করেছি , blur()শেষ হওয়ার পরে কোনও পদক্ষেপ নেই

— Egor Sazanovich

দেখে মনে হচ্ছে আপনার ক্রিয়াকলাপগুলি সারি করা দরকার। এই পৃষ্ঠাটি একবার দেখার চেষ্টা করুন: stackoverflow.com/questions/1058158/… । ফার্স্ট-ইন-ফার্স্ট-আউট (ফিফো) অংশটি আপনার সাথে সম্পর্কিত হতে পারে

— প্যাট্রিয়টেক

Answer 1

সমাধান ঘ

mousedownপরিবর্তে শুনুন click।

mousedownএবং blurঘটনা একের পর এক ঘটে যখন আপনি মাউস বাটন প্রেস, কিন্তু clickশুধুমাত্র ঘটে যখন আপনি এটি ছেড়ে দিন।

সমাধান 2

আপনি করতে পারেন 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 আমার একই পরিস্থিতিতে কাজ করেছিল! সহজ পরিবর্তন! আপনাকে ধন্যবাদ :)

— জন

আপনাকে ধন্যবাদ :) তবে আপনি কী ব্যাখ্যা করতে পারেন কেন ক্লিকের পরিবর্তে মোডাসাউন শোনা কবজের মতো কাজ করে?

— মুদাসসির আলী

@ মুদাসসিরআলি কারণ মোসডাউন ইভেন্টটি অস্পষ্ট হওয়ার আগে আসে এবং তারপরে ক্লিক আসে। jsfiddle.net/f3BKP

— আলেক্সি লেবেদেভ

সমাধান # 1 আমার মতে আরও ভাল পছন্দ। সহজ এবং কার্যকর। টাইমআউটটি অপ্রত্যাশিত আচরণের কোড + আরও বেশি ঘরকে বোঝাতে চাইবে (কতক্ষণ সময় শেষ হবে? ক্লিকটি নিবন্ধিত করার জন্য যথেষ্ট দীর্ঘ তবে ব্যবহারটি বিভ্রান্ত করার পক্ষে খুব বেশি দীর্ঘ নয় ...)।

— cw24

সমাধান # 2 বুদ্ধিমান। আমি এটা কখনই বের করতে পারতাম না! ধন্যবাদ

— টোবিয়া

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

আমার ক্ষেত্রে, ইভেন্ট.রিলেটেড টার্গেটটি বাতিল করে দেয়, কোনও ধারণা কেন এমন হতে পারে?

— gaurav5430

: ঠিক আছে, উত্তর এখানে পেয়েছিলাম 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;
*/
});