ファイルを削除する前に警告を表示するJqueryコード

Question

jqueryを使用してファイルを削除しようとすると、警告メッセージが表示され、削除に必要なファイルが表示されますが、オレンジをクリックすると警告は表示されません私のjquery $('#DeleteJfile').click(function()は、最初のファイルでのみ動作します。警告メッセージを表示するか、ファイルを削除します。

<ul> 
<li id="DeleteJfile" data-animal-type="delete-1">Orange</li> 
<li id="DeleteJfile" data-animal-type="delete-2">Banana</li> 
<li id="DeleteJfile" data-animal-type="delete-3">Mango</li> 
<li id="DeleteJfile" data-animal-type="delete-4">You</li> 
</ul> 

<div class="AreYousure-box" style="display:none;"> 
Are you sure you want to delete this file? 
<br/> 
<form method="post" action="delete.php"> 
<input type="hidden" id="TodeletFile"/> 
<input type="submit" name="yes" value="yes"> 
<input type="button" id="no" value="no"></form> 
</div> 

私のjqueryのスクリプト

<script> 
    $('#DeleteJfile').click(function(){ 
     var TypeOfVote = $(this).attr('data-animal-type').split("-")[1]; 
       alert(TypeOfVote); 
       $('.AreYousure-box').toggle(); 
       $('#TodeletFile').val(TypeOfVote); 
       }); 
    </script> 

Answer 1

idはHTMLで常に一意である必要があります。それにはclassを使用してください。

<ul> 
    <li class="DeleteJfile" data-animal-type="delete-1">Orange</li> 
    <li class="DeleteJfile" data-animal-type="delete-2">Banana</li> 
    <li class="DeleteJfile" data-animal-type="delete-3">Mango</li> 
    <li class="DeleteJfile" data-animal-type="delete-4">You</li> 
</ul> 

その後

$('.DeleteJfile').click(function() 

Answer 2

これは、あなたが複数の要素に同じid DeleteJfileを使用しているため、クラスにIDを変更して、もう一度お試しくださいです。それが動作します。

<script> 
    $('.DeleteJfile').click(function(){ 
     var TypeOfVote = $(this).attr('data-animal-type').split("-")[1]; 
       alert(TypeOfVote); 
       $('.AreYousure-box').toggle(); 
       $('#TodeletFile').val(TypeOfVote); 
       }); 
    </script> 

Answer 3

ID常に一意である必要があります。クリックイベントは、オレンジだけのために

利用代わりclass

に動作しますので、

イベントは、それが出会う最初のIDにバインドされます、あなたのケースでオレンジは、このIDを持つ最初のDOMました

Demo