时间戳

首页 > 解决方案 > 无法访问事件数据 - event.data 未定义

javascript - 无法访问事件数据 - event.data 未定义

问题描述

我触发了一个事件“ modal:show ”，我在其中传递了一个模态对象的 id。但是当我处理事件时，Event.data总是未定义的。

我应该如何访问这些值？

<img src="/GetPicture?pic=110&thumb=1" class="r img show-modal" data-modal="modalZoom" data-id="110" data-index="1" />

$(".show-modal").click(function (event) {
    var idModal = $(this).data("modal");

    event.preventDefault();

    $("#" + idModal).trigger("modal:show", [{ id: idModal }]);
});

$(".modal").on("modal:show", function (event) {
    var $modal = $("#" + event.data.id);

    $modalBlack.fadeIn("slow", function () {
        $modal.fadeIn("fast", function () {
            $modal.trigger("modal:visible", [{ id: event.data.id }]);
        });
    });
});

标签： javascriptjquery

解决方案

您尝试与modal:show事件一起传递的额外数据不会附加到事件对象本身；相反，它将作为事件处理程序的第二个参数到达：

$(".show-modal").click(function(event) {
  var idModal = $(this).data("modal");
  event.preventDefault();
  $("#" + idModal).trigger("modal:show", [{
    id: idModal
  }]);
});

$(".modal").on("modal:show", function(event, foo) {
  console.log(foo.id)  // <-- not event.data.id or event.id; the data you want isn't attached to the event object at all
  // ...
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="show-modal" data-modal="modalZoom" data-id="110" data-index="1" />
<div class="modal" id="modalZoom">test</div>

但是，在这种特殊情况下，由于您要查找的 ID 位于触发事件的同一元素上，因此不在处理程序之间传递数据会简单得多，而是从 DOM 中读取数据：

$(".show-modal").click(function(event) {
  var idModal = $(this).data("modal");
  event.preventDefault();
  $("#" + idModal).trigger("modal:show");
});

$(".modal").on("modal:show", function(event) {
  console.log($(this).attr("id"))
  // ...
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="show-modal" data-modal="modalZoom" data-id="110" data-index="1" />
<div class="modal" id="modalZoom">test</div>

推荐阅读