2010-11-25 4 views
5

JQuery UI'nin "sortable" dosyasını kullanıyorum bir tablo var. Tabloda, böyle, tıklanabilir öğelerle kapmak ve tablo yeniden sıralamak için bir "sürükle kolu" oluşan satırlar ve hücreleri vardır: Benim kodjQuery UI sortable ve live() click problemi - kayıt için tıklatarak iki kez tıklatmanız gerekiyor

<table id="test-table"> 
    <tbody> 
    <tr> 
     <td class="handle"><div class="ui-icon ui-icon-arrowthick-2-n-s" /></td> 
     <td class="clickycell"><a href="#">Testing 1</a></td> 
    </tr> 
    <tr> 
     <td class="handle"><div class="ui-icon ui-icon-arrowthick-2-n-s" /></td> 
     <td class="clickycell"><a href="#">Testing 2</a></td></td> 
    <tr> 
     <td class="handle"><div class="ui-icon ui-icon-arrowthick-2-n-s" /></td> 
     <td class="clickycell"><a href="#">Testing 3</a></td></td> 
    </tr> 
    </tbody> 
</table> 

, kullandığım ayrıca masa sıralanabilir yapmak ve jQuery canlı(), bunun gibi tıklanabilir öğelere bir tıklama etkinliğini bağlamak:

$(function() { 
    /* 
     Using live() because in my real code table rows are dynamically added. 
     However, if I use click() instead, as in the commented-out code, it works 
     fine, without any need to click twice. 

    */ 
    // $(".clickycell a").click(function() { 
    $(".clickycell a").live('click', function() { 
     alert("Successful click"); 
     return false; 
    }); 
    $("#test-table tbody").sortable({ 
     handle: "td.handle", /* Use the draggy handle to move, not the whole row */ 
     cursor: "move" 
    }); 
}); 

ben canlı (kullanıyorum) satırlar dinamik gerçek kodda tabloya eklenebilir çünkü.

Sorunum şudur: sıralamadan önce tıklanabilir öğelerin herhangi birini tıklarsam, iyi çalışıyorlar. Kullanıcı satırları yeniden sıralamak için sürükledikten sonra, kayıt için bir tıklama için 'u iki kez'a tıklatmak zorundayım. İkinci tıklamadan sonra, tıklanabilir öğeler, bir sonraki satırlar sürüklenene kadar tek bir tıklamaya ihtiyaç duyan "normal" e geri döner.

İzlenen kodda olduğu gibi live() yerine click() işlevini kullanırsam - her seferinde tek tıklamayla iyi çalışır, ancak söylediğim gibi live() yi kullanmayı tercih ederim . Ve neden işe yaramadığını merak ediyorum.

a live jsFiddle example here'da var. Bir satırı farklı bir konuma sürüklemeyi ve ardından "Test ..." bağlantılarından birini tıklamayı deneyin. Firefox'ta, en azından "Başarılı tıklama" uyarısını almak için iki kez tıklamam gerekiyor.

Herhangi bir fikrin var mı?

+0

Chrome'un bir sorunu yok. – Stephen

+1

FF'deki problemi doğruladım ama garip bir böcek! Birisi eksik olduğum şeyle burada cevap vermedikçe, bir hata raporu göndermek isteyebilirsiniz. – Stephen

+0

@Stephen İlginç, teşekkürler; o zaman gerçekten bir jQuery hatası olabilir. Sorun aynı zamanda işimde mevcut olan tek başka tarayıcı olan IE6'da da ortaya çıkıyor (sorma!) –

cevap

2

"It is a bug" yanıtıyla bitmek talihsiz bir durumdur, ancak sanırım bazen bu gerçekleşir. Belki GitHub girişimi temizlerim ve izleyip takip edip edemeyeceğimi görmek için bir çatal atın.

5

Yayınınızı bulduğumda aynı sorunu "canlı" ve sortable ile yapıyordum (delege aynı soruna da sahip). Gözlemi takip etmek için @Stephen, bir öğenin tıklama işleyicisinden iki kez tıklamak zorunda kalmadan canlı çalışmalarla ciltlenmeden önce bir kez sürükleme tutamacına tıklamakla ilgili yapılmış ... Bu geçici çözümü başarıyla kullandım. Bir hack için çok saldırgan bulmuyorum.

$('table.demo tbody').sortable({ 
    handle: 'td.drag', 
    stop: function(e,ui){ 
     $('td.drag', ui.item).click(); 
    } 
}); 

Sadece buna iki kere tıklayarak gerektirmeyen canlı ile bağlı olan (benim satırda) Diğer ürünleri sürükleme işlemi tamamlandıktan kısa zamanda sürükleme işleyicisi Bir tıklama çağrısı veren ve ediyorum.

+0

Korkarım ki bunu doğrulayamıyorum, şimdi farklı bir şeye geçtim, ama + Cevabı eklemek için 1; Umarım bir başkasına yardım eder! –

+0

Elbette, bunun için teşekkürler. :) – Igor