click () เหตุการณ์เรียกสองครั้งใน jquery

ฉันตั้งค่าองค์ประกอบลิงก์และเรียกเหตุการณ์คลิกใน jquery แต่เหตุการณ์การคลิกเรียกสองครั้งโปรดดูรหัส jquery ด้านล่าง

$("#link_button")
.button()
.click(function () {
   $("#attachmentForm").slideToggle("fast");
});

กรุณาแนะนำ.

ขอบคุณ

ตรวจสอบให้แน่ใจและตรวจสอบว่าคุณไม่ได้รวมสคริปต์ของคุณสองครั้งโดยไม่ได้ตั้งใจในหน้า HTML ของคุณ

ทำการเลิกผูกก่อนการคลิก

$("#link_button").unbind('click');
$("#link_button")
.button()
.click(function () {
   $("#attachmentForm").slideToggle("fast");
});

หมายความว่าโค้ดของคุณรวมสคริปต์ jquery สองครั้ง แต่ลองสิ่งนี้:

$("#btn").unbind("click").click(function(){

//your code

});

ฉันพยายาม e.stopImmediatePropagation(); ดูเหมือนว่าจะได้ผลสำหรับฉัน

ในกรณีของฉันฉันใช้สคริปต์ด้านล่างเพื่อแก้ไขปัญหา

$('#id').off().on('click',function(){
    //...
});

off()unbinds #idทุกเหตุการณ์ที่ผูกไว้กับ หากคุณต้องการที่จะยกเลิกการเชื่อมโยงเฉพาะเหตุการณ์แล้วใช้clickoff('click')

เพียงโทร. off () ก่อนโทร. บน ()

การดำเนินการนี้จะลบตัวจัดการเหตุการณ์ทั้งหมด:

$(element).off().on('click', function() {
// function body
});

ในการลบเฉพาะตัวจัดการเหตุการณ์ 'คลิก' ที่ลงทะเบียน:

$(element).off('click').on('click', function() {
// function body
});

วิธีแก้ปัญหาทั่วไปสำหรับปัญหาการคลิกสองครั้งคือการวาง

e.stopPropagation()

ในตอนท้ายของฟังก์ชันของคุณ (สมมติว่าคุณใช้function(e)นั่นคือ) สิ่งนี้จะป้องกันไม่ให้เหตุการณ์เดือดซึ่งอาจนำไปสู่การเรียกใช้ฟังก์ชันครั้งที่สอง

ฉันมีปัญหาเดียวกัน แต่คุณสามารถลองเปลี่ยนรหัสนี้ได้

$("#link_button")
.button()
.click(function () {
   $("#attachmentForm").slideToggle("fast");
});

สำหรับสิ่งนี้:

$("#link_button").button();
$("#link_button").unbind("click").click(function () {
   $("#attachmentForm").slideToggle("fast");
});

สำหรับฉันรหัสนี้ช่วยแก้ปัญหาได้ แต่ระวังอย่ารวมสคริปต์ของคุณสองครั้งโดยไม่ได้ตั้งใจในหน้า HTML ของคุณ ฉันคิดว่าถ้าคุณทำสองสิ่งนี้อย่างถูกต้องโค้ดของคุณจะทำงานได้อย่างถูกต้อง ขอบคุณ

โปรดลองสิ่งนี้

$('#ddlSupervisor').live('change', function (e) {
    if (e.handled !== true) { //this makes event to fire only once
    getEmployeesbySupervisor();
    e.handled = true;
   }
});

นี่เป็นข้อผิดพลาดโดยเฉพาะอย่างยิ่งในขณะที่เป็น FireFox ฉันค้นหามากลองใช้คำตอบข้างต้นทั้งหมดและในที่สุดก็ได้รับข้อผิดพลาดจากผู้เชี่ยวชาญหลายคนใน SO ดังนั้นในที่สุดฉันก็เกิดความคิดนี้โดยการประกาศตัวแปรเช่น

var called = false;
$("#ColorPalete li").click(function() {
    if(!called)
    {
             called = true;
             setTimeout(function(){ //<-----This can be an ajax request but keep in mind to set called=false when you get response or when the function has successfully executed.
                 alert('I am called');
                 called = false;
             },3000);

    }
});

ด้วยวิธีนี้ก่อนอื่นจะตรวจสอบว่ามีการเรียกใช้ฟังก์ชันก่อนหน้านี้หรือไม่

การเพิ่มe.preventDefault();เมื่อเริ่มฟังก์ชั่นของฉันได้ผลสำหรับฉัน

นี่เป็นคำถามที่เก่ากว่า แต่ถ้าคุณใช้การมอบหมายงานเหตุการณ์นี่คือสิ่งที่ทำให้เกิดปัญหาสำหรับฉัน

หลังจากลบ.delegate-twoมันหยุดดำเนินการสองครั้ง ฉันเชื่อว่าสิ่งนี้จะเกิดขึ้นหากผู้รับมอบสิทธิ์ทั้งสองอยู่ในหน้าเดียวกัน

$('.delegate-one, .delegate-two').on('click', '.button', function() {
    /* CODE */
});

ข้อมูลโค้ดนี้ไม่มีผลเสีย เป็นอีกส่วนหนึ่งในคริปของคุณ @karim บอก

ในกรณีของฉันมันทำงานได้ดีใน Chrome และ IE ก็โทรหา.click()สองครั้ง หากนั่นเป็นปัญหาของคุณฉันจะแก้ไขโดยส่งคืนเท็จหลังจากโทรหา.click()เหตุการณ์

   $("#txtChat").keypress(function(event) {
        if (event.which == 13) {
            $('#btnChat').click();
            $('#txtChat').val('');
            return false;
        }
    });

การโทรunbindช่วยแก้ปัญหาของฉัน:

$("#btn").unbind("click").click(function() {
    // your code
});

ฉันไม่แน่ใจว่าทำไม แต่ฉันมีปัญหานี้กับ

$(document).on("click", ".my-element", function (e) { });

พอเปลี่ยนเป็น

$(".my-element").click(function () { });

ปัญหาได้รับการแก้ไขแล้ว แต่มีบางอย่างผิดปกติในรหัสของฉัน

ฉันถูกหลอกโดยการเลือกที่ตรงกับหลายรายการดังนั้นแต่ละรายการจึงถูกคลิก :firstช่วย:

$('.someClass[data-foo="'+notAlwaysUniqueID+'"]:first').click();

ฉันก็มีปัญหานี้กับ FF เช่นกัน อย่างไรก็ตามแท็กของฉันถูกผูกไว้กับ<a>แท็ก แม้ว่า<a>แท็กจะไม่ไปไหน แต่ก็ยังทำการดับเบิลคลิก ฉันเปลี่ยน<a>แท็กเป็น<span>แท็กแทนและปัญหาการดับเบิลคลิกก็หายไป

อีกทางเลือกหนึ่งคือการลบแอตทริบิวต์ href ทั้งหมดหากลิงก์ไม่ไปไหน

ฉันประสบปัญหานี้เนื่องจาก$(elem).click(function(){});สคริปต์ของฉันถูกวางไว้ในบรรทัดใน div ที่ตั้งค่าเป็นstyle="display:none;".

เมื่อการแสดง css ถูกสลับไปที่บล็อกสคริปต์จะเพิ่มตัวฟังเหตุการณ์เป็นครั้งที่สอง ฉันย้ายสคริปต์ไปยังไฟล์. js แยกต่างหากและไม่มีการเริ่มต้นตัวฟังเหตุการณ์ที่ซ้ำกันอีกต่อไป

เมื่อฉันใช้วิธีนี้บนหน้าโหลดด้วย jquery ฉันเขียน$('#obj').off('click');ก่อนตั้งค่าฟังก์ชันคลิกดังนั้นฟองจึงไม่เกิดขึ้น ใช้ได้ผลสำหรับฉัน

คำตอบง่ายๆของฉันคือเปลี่ยนการเชื่อมโยงการคลิกให้เป็นฟังก์ชันและเรียกสิ่งนั้นจากการคลิกขององค์ประกอบ - ทำงานได้ดี! ในขณะที่ไม่มีข้อใดทำ

หากกิจกรรมของคุณมีการโทรสองครั้งหรือสามครั้งหรือมากกว่านั้นอาจช่วยได้

หากคุณกำลังใช้สิ่งนี้เพื่อกระตุ้นเหตุการณ์ ...

$('.js-someclass').click();

…จากนั้นให้ความสนใจกับจำนวน.js-someclassองค์ประกอบที่คุณมีบนหน้าเว็บเพราะจะทำให้เกิดเหตุการณ์คลิกสำหรับองค์ประกอบทั้งหมด - ไม่ใช่แค่ครั้งเดียว!

วิธีแก้ไขง่ายๆคือตรวจสอบให้แน่ใจว่าคุณเรียกใช้การคลิกเพียงครั้งเดียวโดยเลือกเพียงองค์ประกอบแรกเช่น:

$('.js-someclass:first').click();

แน่นอนว่าที่อื่นในสคริปต์ของคุณเหตุการณ์ "คลิก" ถูกผูกไว้กับองค์ประกอบเดียวกันอีกครั้งเนื่องจากคำตอบ / ความคิดเห็นอื่น ๆ กำลังแนะนำ

ฉันมีปัญหาที่คล้ายกันและเพื่อตรวจสอบว่าฉันเพิ่มconsole.logคำสั่งลงในสคริปต์ของฉันเช่นในตัวอย่างต่อไปนี้:

$("#link_button")
    .button()
    .click(function () {
        console.log("DEBUG: sliding toggle...");
        $("#attachmentForm").slideToggle("fast");
    });

หากเมื่อคลิกที่ปุ่มคุณได้รับสิ่งที่คล้ายกับภาพด้านล่างจากคอนโซลนักพัฒนาซอฟต์แวร์ของเบราว์เซอร์ของคุณ (อย่างที่ฉันทำ) คุณจะรู้แน่นอนว่าclick()เหตุการณ์นั้นถูกผูกไว้สองครั้งกับปุ่มเดียวกัน

หากคุณต้องการโปรแกรมแก้ไขด่วนวิธีแก้ปัญหาที่เสนอโดยผู้วิจารณ์คนอื่น ๆ ในการใช้offวิธีการ (btw unbindเลิกใช้แล้วตั้งแต่ jQuery 3.0) เพื่อเลิกผูกเหตุการณ์ก่อนที่จะผูกเหตุการณ์ (re) ให้ทำงานได้ดีและฉันขอแนะนำด้วย:

$("#link_button")
    .button()
    .off("click")
    .click(function () {
        $("#attachmentForm").slideToggle("fast");
    });

ขออภัยนี่เป็นเพียงแพทช์ชั่วคราวเท่านั้น! เมื่อปัญหาในการทำให้เจ้านายของคุณมีความสุขได้รับการแก้ไขแล้วคุณควรเจาะลึกรหัสของคุณอีกเล็กน้อยและแก้ไขปัญหา "การผูกซ้ำ"

วิธีแก้ปัญหาที่แท้จริงขึ้นอยู่กับกรณีการใช้งานเฉพาะของคุณ ตัวอย่างเช่นในกรณีของฉันมีปัญหา "บริบท" ฟังก์ชันของฉันถูกเรียกใช้อันเป็นผลมาจากการเรียก Ajax ที่นำไปใช้กับบางส่วนของเอกสาร: การโหลดเอกสารทั้งหมดซ้ำเป็นการโหลดบริบท "หน้า" และ "องค์ประกอบ" ซ้ำซึ่งส่งผลให้เหตุการณ์ถูกผูกไว้กับองค์ประกอบสองครั้ง .

วิธีแก้ปัญหาของฉันคือการใช้ประโยชน์จากฟังก์ชันjQuery oneซึ่งเหมือนกับonยกเว้นว่าเหตุการณ์จะถูกยกเลิกโดยอัตโนมัติหลังจากการเรียกใช้ครั้งแรก นั่นเหมาะสำหรับกรณีการใช้งานของฉัน แต่อีกครั้งอาจไม่ใช่วิธีแก้ปัญหาสำหรับกรณีการใช้งานอื่น ๆ

มีปัญหาเดียวกัน สิ่งนี้ได้ผลสำหรับฉัน -

$('selector').once().click(function() {});

หวังว่านี่จะช่วยใครบางคนได้

ในกรณีของฉัน HTML ถูกวางไว้ดังนี้:

<div class="share">
  <div class="wrapper">
    <div class="share">
    </div>
  </div>
</div>

และ jQuery ของฉันเป็นแบบนี้:

jQuery('.share').toggle();

มันทำให้ฉันสับสนเพราะไม่มีอะไรเกิดขึ้น ปัญหาคือว่าภายใน.shares toggle จะยกเลิกการออกนอกs.sharetoggle

ฉันแก้ไขปัญหานี้โดยเปลี่ยนประเภทองค์ประกอบ แทนที่จะเป็นปุ่มฉันวางอินพุตและปัญหานี้จะไม่เกิดขึ้นอีก

instesd ของ:

<button onclick="doSomthing()">click me</button>

แทนที่ด้วย:

<input onclick="doSomthing()" value="click me">