Question

我触发事件“的模态：显示”，其中我通过一个模式对象的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 }]);
        });
    });
});

Answer 1

您尝试与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>

Answer 2

我替换了这个：

var $modal = $("#" + event.data.id);

与此：

var $modal = $("#" + event.id);

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

2 个答案: