jQuery on() kullanarak kablolama yukarı tıklama olayı, Ajax çağrısı yoluyla enjekte edilmiş HTML'de tetiklenmez

Question

Bir html dataType ile bir Ajax çağrısı yoluyla döndürülen kısmi bir görünüm var - bu html içinde bir kimlik ile bir anchor etiketi var jQuery'nin .on() API'sini ve çerçevenin 1.7.1 sürümünü kullanarak bir tıklama olayı kuruyorum.

<div id="container" class="modal-dialog"> 
    <h1>Heading</h1> 
    <a id="thelink" href="#"> 
     <img src="<%:Url.Content("~/Path/To/Image.jpg")%>" /></a> 
</div> 

..ve müdahale kısmi görünüşüdür sonucu olarak yukarıda bahsedilen döner bir MVC kontrol eylemi için standart $.ajax POST ile

ve:

'e bakacak olursak, aşağıdaki gibi kısmi görünüşüdür hayal modal diyaloğa tükürün. Ben şöyle görünüyor kanca çalışılıyor

olay kodu: Ben geçerseniz

Şimdi

$(function() { 
    $("#thelink").on("click", function (e) { 
     e.preventDefault(); 
     $("#jquery-ui-dialog-box").dialog("close"); 
    }); 
}); 

, on()live() için - her şeyin beklendiği gibi çalışır. Yukarıdaki kod IE8 (IE8 Standartlar modu) olsa da, olay tetiklenmez - kesme noktaları vurulmaz, jQuery UI modal yukarıdaki örneğe göre kapanmaz. Yine de bir live() çağrısı ile, hepsi beklendiği gibi çalışır.

Bu şimdiye kadar (üzerinde davranışını arasındaki bir farkı görülen) ve kaldırılmış ya da ben hiç var olay bağlayıcı API (temsilci, canlı, bağlaması)

'toplu' ettik ilk ve tek defa live() veya delegate()'u kullanmaya geri döndürme ile ilgili sorunlar, ancak bunun mümkün olup olmadığını anlamak istersiniz, bu mümkün değilse!

Selamlar SB

Answer 1

$(foo).live(type, handler)$(document).on(type, foo, handler) eşdeğerdir, bunun yerine aşağıdaki deneyin;

$(function() { 
    $(document).on("click", '#thelink', function (e) { 
     e.preventDefault(); 
     $("#jquery-ui-dialog-box").dialog("close"); 
    }); 
}); 

live() imzası kafa karıştırıcıdır; aslında seçilen elemanlara bir işleyiciyi bağlamazsınız, ancak seçilen seçiciyle (How does jQuery .live() work?) eşleşen bir öğeye işlenecek bir olayı dinleyen document öğesine.

$(foo).live(type, handler), $(document).delegate(foo, type, handler);

İleride başvurmak üzere, $(foo).delegate(selector, type, handler), yalnızca birinci ve ikinci parametreleri değiştirerek on()'a dönüştürülebilir; on(), olay türü ilk, ardından (isteğe bağlı) seçiciyi bekler.