使用javascript刪除操作，但此代碼不起作用

Question

這是執行刪除操作的代碼。出現四個圖像，但通過提供onload功能不會顯示刪除操作的警報框。請指導我...這裏是代碼。

// script for deletedelete operation 

    $(document).ready(function(){ 

     $('a.delete').on('click',function(e){ 
      e.preventDefault(); 
      imageID = $(this).closest('.image')[0].id; 
      alert('Now deleting "'+imageID+'"'); 
      $(this).closest('.image') 
       .fadeTo(300,0,function(){ 
        $(this) 
         .animate({width:0},200,function(){ 
          $(this) 
           .remove(); 
         }); 
       }); 
     }); 

    }); 

HTML

//four images being given with delete link 


<div id="container"> 
     <div class="image" id="image1" style="background-image:url(http://lorempixel.com/100/100/abstract);"> 
      <a href="#" class="delete">Delete</a> 
     </div> 
     <div class="image" id="image2" style="background-image:url(http://lorempixel.com/100/100/food);"> 
      <a href="#" class="delete">Delete</a> 
     </div> 
     <div class="image" id="image3" style="background-image:url(http://lorempixel.com/100/100/people);"> 
      <a href="#" class="delete">Delete</a> 
     </div> 
     <div class="image" id="image4" style="background-image:url(http://lorempixel.com/100/100/technics);"> 
      <a href="#" class="delete">Delete</a> 
     </div> 
    </div> 

Answer 1

一切工作確定....讓我帶一個在這裏拍攝。你可能沒有在你的代碼中包含Jquery文件？

您有加入此標記

<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script> 

這FIDDLE只是你的代碼拷貝粘貼。沒有一個變化

HTML

<div id="container"> 
    <div class="image" id="image1" style="background-image:url(http://lorempixel.com/100/100/abstract);"> 
     <a href="#" class="delete">Delete</a> 
    </div> 
    <div class="image" id="image2" style="background-image:url(http://lorempixel.com/100/100/food);"> 
     <a href="#" class="delete">Delete</a> 
    </div> 
    <div class="image" id="image3" style="background-image:url(http://lorempixel.com/100/100/people);"> 
     <a href="#" class="delete">Delete</a> 
    </div> 
    <div class="image" id="image4" style="background-image:url(http://lorempixel.com/100/100/technics);"> 
     <a href="#" class="delete">Delete</a> 
    </div> 
</div> 

JQUERY

$('a.delete').on('click',function(e){ 
     e.preventDefault(); 
     imageID = $(this).closest('.image')[0].id; 
     alert('Now deleting "'+imageID+'"'); 
     $(this).closest('.image') 
      .fadeTo(300,0,function(){ 
       $(this) 
        .animate({width:0},200,function(){ 
         $(this) 
          .remove(); 
        }); 
      }); 
    }); 

Answer 2

的代碼是工作的罰款......如果你不包括jQuery的文件，包括它..

<腳本src =「http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js」>

</SCRIPT>

<腳本> $（文件）。就緒（函數（）{

$('a.delete').on('click',function(e){ 
    e.preventDefault(); 
    imageID = $(this).closest('.image')[0].id; 
    alert('Now deleting "'+imageID+'"'); 
    $(this).closest('.image') 
     .fadeTo(300,0,function(){ 
      $(this) 
       .animate({width:0},200,function(){ 
        $(this) 
         .remove(); 
       }); 
     }); 
}); 

}）;

</script>