โฮเวอร์ jQuery สด

161

ฉันกำลังใช้รหัส jquery ต่อไปนี้เพื่อแสดงปุ่มลบบริบทเฉพาะสำหรับแถวของตารางที่เราวางเมาส์ไว้เท่านั้น ใช้งานได้ แต่ไม่ใช่สำหรับแถวที่เพิ่มด้วย js / ajax ในทันที ...

มีวิธีที่จะทำให้การทำงานกับเหตุการณ์สดนี้หรือไม่?

$("table tr").hover(
  function () {},
  function () {}
);

jquery live jquery-1.4

— Jorre
แหล่งที่มา

245

ตอนนี้ jQuery 1.4.1 รองรับ "hover" สำหรับเหตุการณ์ live () แต่มีเพียงฟังก์ชันตัวจัดการเหตุการณ์หนึ่งตัวเท่านั้น:

$("table tr").live("hover",

function () {

});

อีกทางเลือกหนึ่งคุณสามารถจัดเตรียมสองฟังก์ชั่นหนึ่งรายการสำหรับเมาส์เซ็นเตอร์และอีกหนึ่งฟังก์ชั่นสำหรับ mouseleave:

$("table tr").live({
    mouseenter: function () {

    },
    mouseleave: function () {

    }
});

— Philippe Leybaert
แหล่งที่มา

มันยังไม่ทำงานสำหรับฉันแม้ว่า ฉันพยายามทำสิ่งนี้: ฉันจะไปไหนผิด > $ ('table tr'). live ('hover', function () {$ (this) .find ('. deletebutton'). toggle ();});

— Shripad Krishna

1

สิ่งนี้ไม่ถูกต้องและใช้งานไม่ได้ ดูหัวข้อ "เหตุการณ์หลายรายการ" ภายใต้เอกสารสำหรับlive: api.jquery.com/live

— Jason

34

ในฐานะของ jQuery 1.4.2, .live ( "เลื่อน") เทียบเท่ากับ .live ( "mouseover mouseout") ไม่ .live ( "mouseenter MouseLeave") - ดูbugs.jquery.com/ticket/6077ดังนั้น live ("mouseenter mouseleave", function () {... }), หรือ. live ("mouseenter mouseleave", function () {... }). live ("mouseleave", function () {... })

— aem

2

ขอบคุณ @ aem สิ่งนี้ใช้ได้กับฉัน: $ ("table tr"). live ("mouseenter", function () {... }). live ("mouseleave", function () {... });

— jackocnr

3

ตามหน้าเอกสารของ JQuery.liveจะกล่าวว่าใช้.onแทน "ตั้งแต่ jQuery 1.7 วิธีการ. live () เลิกใช้แล้วใช้. on () เพื่อแนบตัวจัดการเหตุการณ์"

— johnt Entrepreneur

110

$('.hoverme').live('mouseover mouseout', function(event) {
  if (event.type == 'mouseover') {
    // do something on mouseover
  } else {
    // do something on mouseout
  }
});

http://api.jquery.com/live/

— dmitko
แหล่งที่มา

ทำงานให้ฉันเช่นกัน +1 พยายามทำรุ่นของ Philippe โดยใช้ mouseover และ mouseenter - ไม่ทำงาน แต่อันนี้ก็ทำ ขอบคุณ!

— eduncan911

.liveเลิกใช้แล้วในตอนนี้ดูคำตอบของ Andre สำหรับวิธีการเปลี่ยนทันที

— johnt Entrepreneur

1

การใช้mouseoverและmouseoutกิจกรรมที่นี่จะทำให้โค้ดทำงานต่อเนื่องในขณะที่ผู้ใช้เลื่อนเมาส์ไปรอบ ๆ ภายในองค์ประกอบ ผมคิดmouseenterและmouseleaveมีความเหมาะสมมากขึ้นเพราะมันจะไฟเพียงครั้งเดียวเมื่อเข้า

— johnt Entrepreneur

60

.live() เลิกใช้แล้วตั้งแต่ jQuery 1.7

ใช้.on()แทนและระบุตัวเลือกการสืบทอด

http://api.jquery.com/on/

$("table").on({
  mouseenter: function(){
    $(this).addClass("inside");
  },
  mouseleave: function(){
    $(this).removeClass("inside");
  }
}, "tr");  // descendant selector

— อังเดร
แหล่งที่มา

6

ใช้งานได้อย่างไม่มีที่ติเมื่อเทียบกับ jQuery 1.9 โซลูชันสดและมอบสิทธิ์ทั้งหมดเลิกใช้! มันจะยอดเยี่ยมถ้ามีใครสามารถยอมรับคำตอบที่ยอมรับได้และยอมรับคำตอบนี้แทน

— jascha

5

ในฐานะของ jQuery 1.4.1 live()เหตุการณ์โฉบทำงานร่วมกับ โดยพื้นฐานแล้วมันจะผูกเข้ากับเหตุการณ์ของ mouseenter และ mouseleave ซึ่งคุณสามารถทำได้กับเวอร์ชั่นก่อนหน้า 1.4.1 เช่นกัน:

$("table tr")
    .mouseenter(function() {
        // Hover starts
    })
    .mouseleave(function() {
        // Hover ends
    });

สิ่งนี้ต้องใช้สองการผูก แต่ก็ใช้ได้เช่นกัน

— Tatu Ulmanen
แหล่งที่มา

5

รหัสนี้ใช้งานได้:

    $(".ui-button-text").live(
        'hover',
        function (ev) {
            if (ev.type == 'mouseover') {
                $(this).addClass("ui-state-hover");
            }

            if (ev.type == 'mouseout') {
                $(this).removeClass("ui-state-hover");
            }
        });

— Jorge E. Cardona
แหล่งที่มา

2

"ui-state-hover" คืออะไร สิ่งนี้นำไปใช้กับคำถามดั้งเดิมของผู้ใช้ได้อย่างไร

— IgorGanapolsky

2

คำเตือน: มีบทลงโทษด้านประสิทธิภาพที่สำคัญกับโฮเวอร์เวอร์ชันสด มันเห็นได้ชัดเจนเป็นพิเศษในหน้าขนาดใหญ่บน IE8

ฉันกำลังทำงานในโครงการที่เราโหลดเมนูหลายระดับด้วย AJAX (เรามีเหตุผลของเรา :) อย่างไรก็ตามฉันใช้วิธีสดสำหรับโฮเวอร์ซึ่งทำงานได้ดีบน Chrome (IE9 ก็โอเค แต่ก็ไม่ได้ยอดเยี่ยม) อย่างไรก็ตามใน IE8 มันไม่เพียง แต่ทำให้เมนูช้าลง (คุณต้องเลื่อนไปสองสามวินาทีก่อนที่มันจะหล่น) แต่ทุกอย่างในหน้านั้นช้าลงอย่างเจ็บปวดรวมถึงการเลื่อนและตรวจสอบช่องทำเครื่องหมายง่ายๆ

การเชื่อมโยงเหตุการณ์ต่าง ๆ โดยตรงหลังจากที่โหลดเสร็จจะทำให้มีประสิทธิภาพเพียงพอ

— ไบรอัน
แหล่งที่มา

2

มีประโยชน์ แต่มีความคิดเห็นมากกว่าคำตอบ

— mikemaccana