2011-12-17 26 views
0

私はajaxingしている画像のギャラリーがあり、私はそれらを削除させたいと思います。だから、それぞれの上にマウスを置くと、Xの小さな画像がコーナーに表示され、クリックするとその画像が削除されます。ここで私はこれがあるjQuery画像on画像

$(".previews").live('mouseenter', function(){ 
console.log('mouse detected'); 
console.log($(this).id); 
    $(this).css({position:'relative'}); 
    $('<div />').text(' ').css({ 
     'height': $(this).height(), 
     'width': $(this).width(), 
     'background': 'url(delete.png) top left no-repeat', 
     'position': 'absolute', 
     'top': 15, 
     'left': 170, 
     'opacity': 0.0 
    }).addClass("hover-tile").bind('mouseleave', function(){ 
      $(".hover-tile").each(function() { $(this).remove(); }); 
}) 
}); 

持っているものを何ごとのようなルックスにajax'dされた画像:今

<div><ul><li class='spacer' style='list-style:none;'><img class='previews' id='" + image_id + "' src='http://whatever.com/default.jpg' /></li></ul></div>"; 

、にconsole.log($(この).ID)。定義されていないものが返され、delete.pngが表示されません。また、live()が減価償却されているjQuery APIウェブサイトを読みましたが、代わりにon()を使用する必要がありますか?

+0

.on()は、廃止予定の宣言済みで、今後のバージョンから削除される可能性があります。 – techfoobar

答えて

1

IMO:ホバーcss擬似クラスで行う方が良いです。このdivをイメージですぐにレンダリングできますが、display:noneスタイルが設定されています。次のコード例があります。

<style> 
.image { 
    border: 1px solid grey; 
    float: left; 
    width: 160px; 
    height: 120px; 
    position: relative; 
    text-align: center; 
} 

.image img { 
    max-width: 160px; 
    max-height: 120px; 
} 

.image .close { 
    display: none; 
    position: absolute; 
    right: 5px; 
    top: 5px; 
} 

.image:hover .close { 
    display: block; 
} 
</style> 
<div class="preview"> 
    <div class="image"> 
     <img src="http://g-ecx.images-amazon.com/images/G/01/kindle/otter/dp/KO-slate-main-lg-holiday._V163478229_.jpg" /> 
     <div class="close" onclick="alert('delete')">X</div> 
    </div> 
    <div class="image"> 
     <img src="http://g-ecx.images-amazon.com/images/G/01/kindle/otter/dp/KO-slate-main-lg-holiday._V163478229_.jpg" /> 
     <div class="close" onclick="alert('delete')">X</div> 
    </div> 
    <div class="image"> 
     <img src="http://g-ecx.images-amazon.com/images/G/01/kindle/otter/dp/KO-slate-main-lg-holiday._V163478229_.jpg" /> 
     <div class="close" onclick="alert('delete')">X</div> 
    </div> 
</div>