jQuery লেবেলে ক্লিক করার সময় দু'বার ক্লিক করুন s

Question

আমি কাস্টম রেডিও বোতাম তৈরি করতে jQuery ব্যবহার করছি এবং আমার একটি সমস্যা আছে। রেডিওর সাথে সম্পর্কিত লেবেলে ক্লিক করার সময় ক্লিকের ইভেন্টগুলি দু'বার জ্বলতে থাকে, আমি যদি কেবলমাত্র রেডিওতে ক্লিক করি তবে এটি ভাল কাজ করছে (ভাল আসলে এটি আমি যে রেডিওটি ক্লিক করছি তা নয় তবে ডিভটি পুরো ইনপুট এবং লেবেলটি গুটিয়ে রাখে)। কোডটি এখানে:

এইচটিএমএল:

 <div id="box">
     <asp:RadioButtonList ID="RadioButtonList1" runat="server">
         <asp:ListItem>RADIO1</asp:ListItem>
         <asp:ListItem>RADIO2</asp:ListItem>
         <asp:ListItem>RADIO3</asp:ListItem>
     </asp:RadioButtonList>
</div>

JQuery:

<script type="text/javascript">
       $(function () {
            $('#box').find('input:radio').each(function (i) {

            var input = $(this);
            // get the associated label using the input's id
            var label = $('label[for=' + input.attr('id') + ']');
            // wrap the input + label in a div
            $('<div class="custom-radio"></div>').insertBefore(input).append(label, input);

            var wrapperDiv = input.parent();

            // find all inputs in this set using the shared name attribute
            var allInputs = $('input[name=' + input.attr('name') + ']');

            // necessary for browsers that don't support the :hover pseudo class on labels
            label.hover(

            function () {
                $(this).addClass('hover');
            }, function () {
                $(this).removeClass('hover checkedHover');
            });

            //bind custom event, trigger it, bind click,focus,blur events
            wrapperDiv.bind('updateState', function () {
                if ($(this)[0].children[1].checked) {
                    allInputs.each(function () {
                        var curDiv = $('div > label[for=' + $(this).attr('id') + ']').parent();
                        curDiv.removeClass('custom-radio-checked');
                        curDiv.addClass('custom-radio');
                    });
                    $(this).toggleClass('custom-radio custom-radio-checked');
                }
                else {
                    $(this).removeClass('custom-radio-checked checkedHover checkedFocus');
                }

            })
            .trigger('updateState')
            .click(function () { console.log('click'); })
            .focus(function () {
                label.addClass('focus');
            }).blur(function () {
                label.removeClass('focus checkedFocus');
            });
        }); 
       });
   </script>

এই আচরণের কোনও সমাধান আছে কি?

Answer 1

যুক্ত করার চেষ্টা করুন:

evt.stopPropagation();
evt.preventDefault();

আপনি যা দেখতে পাচ্ছেন তা .bind () বা। ক্লিক () ক্লিক করুন। এছাড়াও, ফাংশনটিতে প্যারামিটার যুক্ত করুন evt, পছন্দ করুনfunction(evt) {...

Comments

কেন এমন হয়?

— chovy

কারণ এখানে নেস্টেড আইটেম রয়েছে। শ্রেণিবদ্ধ প্রতিটি আইটেম ইভেন্টটি বুদবুদ হবে।

— জর্দান

আপনি যদি এটি কোনও চেকবক্সের জন্য ব্যবহার করে থাকেন তবে ইনপুটটি আসলে চেক করা সম্ভব করার জন্য এটিও আমার প্রয়োজন ছিল:jQuery('input').prop('checked', true);

— ডেভিড সিনক্লেয়ার

return false;`evt.stopPropagation () এর সমতুল্য; evt.preventDefault (); ( jQuery এ )

— তুলসী

Answer 2

আমি সমাধানটি যুক্ত করে উপরে যুক্ত করার চেষ্টা করেছি:

evt.stopPropagation();
evt.preventDefault();

কিন্তু কাজ হয়নি। তবে এটি যোগ করুন:

evt.stopImmediatePropagation();

সমস্যার সমাধান! :)

Comments

আমি জানি না কেন, তবে আপনি যা বলেছেন তা আমার কোডের মতো কাজ করে। ধন্যবাদ!

— শাওশ

পারফেক্ট। এই ভাল কাজ! যদিও করা হয়নি evt.stopPropagation(); evt.preventDefault();; 'টি

— জেমস 111

কেবল এটিই আমার পক্ষে কাজ করেছিল, আমি অন্য ক্রিয়াগুলি সফল না করে চেষ্টা করেছি

— gardarvalur

এই উত্তর আমার জীবন বাঁচায়! ধন্যবাদ: ডি

— ব্লুয়েট্রি

এই ছিল আমার জন্য উত্তর!

— ডিলাক

Answer 3

ক্লিক ইভেন্টটিকে লেবেলের পরিবর্তে ইনপুটটিতে আবদ্ধ করুন। যখন লেবেলটি ক্লিক করা হয় - ইভেন্টটি এখনও ঘটবে কারণ ডাস্টিন উল্লেখ করেছেন যে লেবেলের একটি ক্লিক ইনপুটটিতে ক্লিককে ট্রিগার করে। এটি লেবেলটির স্বাভাবিক কার্যকারিতা ধরে রাখতে দেয়।

$('input').click();

পরিবর্তে

$('label').click();

Comments

যদি আপনার মার্কআপটি লেবেল-মোড়ানো-ইন-ইনপুট কৌশলটি ব্যবহার করে এবং কেবল আমার

— বিচক্ষণতা

আপনার changeলেবেলের পাঠ্য ক্লিকযোগ্য হওয়ার কারণে রেডিও বোতামে এমনকি বাঁধাই করা উচিত - তারা সর্বদা রেডিও বোতামটি নিজেই ক্লিক করেন না।

— chovy

যদি কোনও বুটস্ট্র্যাপেক label > inputসেটআপ ব্যবহার করা হয় তবে এটি উত্তর নয়, উত্তর। কার্যকর করার সময় আপনার কোডে যুক্ত করা evt.stopPropagation()বা যুক্ত evt.preventDefault()করা একটি হ্যাক যা সঠিক সমাধানটি আরও পরিষ্কার এবং আরও কার্যকর হলে এড়ানো উচিত।

— এলপাস্টার

বাহ বাহ কেবল বাহ, আমি প্রায় দু'দিন ধরে বেরিয়েছি, অবশেষে এটি সাহায্য করেছে এবং ব্যাখ্যা করার জন্য অনেক ধন্যবাদ

— ওপেনসোর্স-বিকাশকারী

এই আমার দিন বাঁচা!

— gab06

Answer 4

আপনি যদি ক্লিকের উপাদান হিসাবে কোনও বাহ্যিক ধারক ব্যবহার করার চেষ্টা করছেন তবে আপনি ইভেন্টগুলি প্রাকৃতিকভাবে বুদ্বুদ হতে দিতে এবং আপনার ক্লিক হ্যান্ডলারের মধ্যে প্রত্যাশিত উপাদানটির জন্য পরীক্ষা করতে পারেন। আপনি যদি কোনও ফর্মের জন্য কোনও অনন্য ক্লিক অঞ্চলকে স্টাইল করার চেষ্টা করছেন তবে এই দৃশ্যটি কার্যকর।

<form>
<div id="outer">
    <label for="mycheckbox">My Checkbox</label>
    <input type="checkbox" name="mycheckbox" id="mycheckbox" value="on"/>
</div>
</form>
<script>
$('#outer').on('click', function(e){
    // this fires for #outer, label, and input
    if (e.target.tagName == 'INPUT'){
        // only interested in input
        console.log(this);
    }
});
</script>

Comments

এটি আমার পক্ষে কাজ করেছিল কারণ আমি এখনও রেডিও বোতামটি নির্বাচন করতে চেয়েছিলাম। আমি কেবল ইভেন্ট হ্যান্ডলারটি দু'বার সবকিছু করতে চাইনি।

— chovy

এটি বাচ্চাদের নির্বাচনের অনুমতি দেবে না। বিটিডাব্লু, একই কার্যকারিতা অর্জনের জন্য আরও ভাল বিকল্পটি হ'লif (e.target == e.currentTarget) {}

— চিকেন স্যুপ

Answer 5

এটি সহজ উপায়ে স্থির করতে, লেবেলের "for" বৈশিষ্ট্যটি সরান। লেবেলে ক্লিক করলেও সংশ্লিষ্ট উপাদানগুলির একটি ক্লিক ট্রিগার হবে। (যা আপনার ক্ষেত্রে আপনার ক্লিক ইভেন্টে দু'বার গুলি চালাচ্ছে))

শুভকামনা

Comments

প্রকৃতপক্ষে দ্রুত সমাধান। কেউ যুক্তিযুক্ত হতে পারে যে এটি মার্কআপের সাথে বিশৃঙ্খলা করছে, তবে আমি পাল্টা করব যে "জন্য" বৈশিষ্ট্যের উদ্দেশ্য ইভেন্টের প্রস্তাব। সুতরাং আপনি যদি অন্য কোনও মেকানিজম (jquery) ব্যবহার করে থাকেন তবে সর্বদাভাবে "for" থেকে মুক্তি পান।

— ক্রিস হ্যারিংটন

Answer 6

আমি সাধারণত এই সিন্থ্যাক্স ব্যবহার করি

.off('click').on('click', function () { console.log('click'); })

পরিবর্তে

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

Answer 7

মন্তব্যের মধ্যে সেরা উত্তর লুকানো আছে:

আপনার changeলেবেলের পাঠ্য ক্লিকযোগ্য হওয়ার কারণে রেডিও বোতামে এমনকি বাঁধাই করা উচিত - তারা সর্বদা রেডিও বোতামটি নিজেই ক্লিক করেন না। - chovy ডিসেম্বর 12 '13 এ 1:45 এ

এই বেহালার দেখায় যে, সব অন্যান্য সমাধান - stopPropagation, stopImmediatePropagation, preventDefault, return false- হয় পরিবর্তন কিছুই বা চেকবক্সটি / রেডিও কার্যকারিতা ধ্বংস)। এটি এটিও ব্যাখ্যা করে যে এটি একটি ভ্যানিলা জাভাস্ক্রিপ্ট সমস্যা, কোনও jQuery সমস্যা নয়।

সম্পাদনা: আর একটি কার্যনির্বাহী সমাধান যা আমি সবেমাত্র অন্য থ্রেডে খুঁজে পেয়েছি সেটি হল onclickলেবেলের পরিবর্তে ইনপুটটিকে আবদ্ধ করা । বেহালার Updated ।

Answer 8

সমাধান যোগ করে চেষ্টা করেছি।

evt.stopPropagation();
evt.preventDefault();

কিন্তু কাজ হয়নি।

যোগ করে

evt.stopImmediatePropagation();

সমস্যার সমাধান! :)

Answer 9

E.preventDefault () নিয়ে সমস্যা; এটি কি রেডিও বোতামটি চেক করতে লেবেল ক্লিক বন্ধ করে দেয়?

আরও ভাল সমাধান হ'ল কেবল "চেক করা" দ্রুত চেক যুক্ত করা:

$("label").click(function(e){
  var rbtn = $(this).find("input");
  if(rbtn.is(':checked')){
  **All the code you want to have happen on click**
  }
)};

Comments

এর থেকেও বেশি সংক্ষিপ্ত সমাধানটি কেবল ক্লিকের পরিবর্তে .মাউসআপ ব্যবহার করা হবে

— যোশিষ

এই কোডটি কার্যকর হয় না যদি আপনার কোডটি কোনও ব্যবহারকারীকে একটি রেডিও বোতামটি অনির্বাচিত করার অনুমতি দেয়। ডাবল ফায়ার এই ক্ষেত্রে গুরুতর ঝামেলা ঘটায় causes

— জনচেল

Answer 10

আমার সমস্যাটি কিছুটা আলাদা, কারণ এটি evt.stopPropagation();evt.preventDefault();আমার পক্ষে কাজ করে না, আমি কেবল return false;শেষ পর্যন্ত যুক্ত করি, তবে এটি কার্যকর হয়।

$("#addressDiv").on("click", ".goEditAddress", function(event) {
    alert("halo");
    return false;
});

Answer 11

আমার ক্ষেত্রে সমস্যাটি হ'ল আমার একটি ফাংশনে ক্লিক ইভেন্ট ছিল এবং ফাংশনটি দু'বার সম্পাদিত হয়েছিল .... ফাংশনটির প্রতিটি সম্পাদনা একটি নতুন ক্লিক ইভেন্ট তৈরি করে। - ফেসপাম -

ক্লিক ইভেন্টটি ফাংশনের বাইরে নিয়ে যাওয়ার পরে, সবকিছু প্রত্যাশার মতো কাজ করেছিল! :)

Answer 12

আপনার ইনপুট ট্যাগটিকে ট্রিগার উপাদানটির বাইরে রাখার চেষ্টা করুন, কারণ লেবেল ট্যাগ ক্লিককে এমুলেট করে, তাই আপনার কাছে সর্বদা একাধিক কল থাকবে।

Answer 13

আমার একই সমস্যা ছিল কারণ আমি রেডিও_ডিভ-এর সাথে সংযুক্ত হ্যান্ডলারের সাহায্যে লেবেলের ভিতরে আমার রেডিওতে বাসা বেঁধেছিলাম। নেস্টেড লেবেল সরানো সমস্যার সমাধান করেছে।

<div id="radio_div">
    <label>
       <input type="radio" class="community_radio" name="community_radio" value="existing">
           Add To Existing Community
    </label>
</div>

Answer 14

লেবেলটি রেডিও / চেকবক্সটি পরীক্ষা করতে ট্রিগার করে।

if ($(event.target).is('label')){
    event.preventDefault();
}

এটি বিশেষত লেবেলটিকে এই আচরণটি ট্রিগার করতে বাধা দেয়।

Answer 15

= "কিছু-আইডি" বৈশিষ্ট্যযুক্ত লেবেলের ক্লিকটি একটি নতুন ক্লিককে ট্রিগার করে, তবে কেবলমাত্র লক্ষ্য উপস্থিত থাকলে এবং একটি ইনপুট হয়। আমি ই.প্রিভেন্টডাফল্ট () বা এর মতো স্টাফ দিয়ে এটিকে পুরোপুরি সমাধান করতে সক্ষম হইনি তাই আমি এটি এর মতো করেছিলাম:

উদাহরণস্বরূপ, আপনার যদি এই কাঠামো থাকে এবং .সুম-শ্রেণিতে ক্লিক করার জন্য কোনও ইভেন্ট চান

<div class="some-class">
    <input type=checkbox" id="the-input-id" />
    <label for="the-input-id">Label</label>
</div>

কাজটি কী ছিল:

$(document)
    .on('click', '.some-class', function(e) {
        if(
            $(e.target).is('label[for]')
            &&
            $('input#' + $(e.target).attr('for')).length
        ) {
            // This will trigger a new click so we are out of here
            return;
        }

        // else do your thing here, it will not get called twice
    })
;