Javascript Can'；t光滑滑块内的接触元件

我正在使用Slick slider（）并尝试获取我更改的元素的id。下面的代码显然在slick滑块之外工作，但出于某些奇怪的原因，它总是返回滑块的第一个元素

        <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'));

 });

$（'.image card'）。在（'change'，function（）上{
console.log（$（this.data（'id'））；
});

前面的jquery代码总是给我“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”。

将JQuery代码放入JSFIDLE时似乎可以正常工作。您添加了slickslider js吗？我可以看看您的JSFIDLE吗？