滑らかなスライダ内の要素にアクセスできない

Question

滑らかなスライダ（http://kenwheeler.github.io/slick/）を使用していますが、変更する要素のIDを取得しようとしています。次のコードは滑らかなスライダの外側で動作しますが、何らかの理由でスライダの最初の要素が常に返されます。

 <div class="container-slide"> 
      <div class="slider slider-category"> 
      <div class="slider-card"> 
       <div class="row block-image"> 
        <div class="background-upload"> 
         <label for="image"> 
          <i class="fa fa-picture-o fa-2x" data-toggle="tooltip" data-placement="left"></i> 
         </label> 

         <input id="image" type="file" accept="image/png, image/jpeg, image/gif" name="image" class="text-center image-card" data-id="1"/> 
        </div>      
       </div>  

      </div> 

      <div class="slider-card"> 
       <div class="row block-image"> 
        <div class="background-upload"> 
         <label for="image"> 
          <i class="fa fa-picture-o fa-2x" data-toggle="tooltip" data-placement="left"></i> 
         </label> 

         <input id="image" type="file" accept="image/png, image/jpeg, image/gif" name="image" class="text-center image-card" data-id="2"/> 
        </div>      
       </div>  

      </div> 

     </div> 
     </div> 


$('.image-card').on('change', function() { 
    console.log($(this).data('id')); 

}); 

以前のjqueryコードは、結果として常に「1」を返します。したがって、最初の要素だけが得られます。 なぜこれが起こっていますか？ 滑らかなスライダを使用しないと、明らかにうまくいきます。その非常に単純なコードで何か間違ってはいけません。

滑らかなスライダについて何か不足していますか？私はすべてとすべてのドキュメントを読んだが、私はこの問題のために何も見つけることができなかった。私もbeforeChangeイベントを試みましたが、うまくいきませんでした。

ありがとうございました

Answer 1

私は問題を見つけました。

IDとラベルが変更に影響した理由はわかりませんが、

は、だから私はこれにコードを変更した場合：それは正常に動作します

<div class="container-slide"> 
     <div class="slider slider-category"> 
     <div class="slider-card"> 
      <div class="row block-image"> 
       <div class="background-upload"> 
        <label for="image"> 
         <i class="fa fa-picture-o fa-2x" data-toggle="tooltip" data-placement="left"></i> 
        </label> 

        <input id="image" type="file" accept="image/png, image/jpeg, image/gif" name="image" class="text-center image-card" data-id="1"/> 
       </div>      
      </div>  

     </div> 

     <div class="slider-card"> 
      <div class="row block-image"> 
       <div class="background-upload"> 
        <label for="image2"> 
         <i class="fa fa-picture-o fa-2x" data-toggle="tooltip" data-placement="left"></i> 
        </label> 

        <input id="image2" type="file" accept="image/png, image/jpeg, image/gif" name="image" class="text-center image-card" data-id="2"/> 
       </div>      
      </div>  

     </div> 

    </div> 
    </div> 

。 （私は入力IDとラベルを "image2"に変更しました）