Question

我正在尝试创建此弹出窗口，如果您单击该弹出窗口内的黑色正方形，则该弹出窗口应被删除。

这是codepen的链接： https://codepen.io/anon/pen/oJeeyY

当您单击黑色正方形时，它不会以任何方式响应。但是，如果您在控制台中添加删除的javascript代码，它将可以正常工作。

有人知道为什么以及如何解决吗？

HTML

<div class="popup-div"></div>
<div class="table-container">
  <h3 class="category-title">Testproducts</h3>
  <table class="table-shop table table-hover table-responsive">
    <thead>
      <tr>
        <td style="min-width:100px;">Artikel Nr.</td>
        <td>Product Name</td>
        <td style="min-width:100px;">Price in €</td>
        <td style="min-width: 80px;"></td>
      </tr>
    </thead>

    <tbody><tr class="product-item">
      <td class="product-sku" style="min-width:100px;">Article Test</td>
      <td class="product-name">Testname</td>
      <td class="product-price" style="min-width:100px;">
        <span>20<span>
      </td>
      <td style="min-width: 80px;">
        <button onclick="addToBasket('Artikel Test', 1)">Add</button>
      </td>
      </tr>
    </tbody>
  </table>
</div>

CSS

.category-title {color: #ff6a00;text-transform: uppercase;margin-bottom: 30px;font-weight:600;text-shadow:1px 1px 4px rgba(132, 55, 1, 0.1);}
.table-container {display:block;margin-bottom:100px;}
.table-shop {box-shadow: 0 5px 5px -3px rgba(0,0,0,.2), 0 8px 10px 1px rgba(0,0,0,.14), 0 3px 14px 2px rgba(0,0,0,.12);}
.table-shop * {transition:0.1s all ease-in-out;}
.table-shop thead tr td {font-weight:500;font-size:12px;color:rgba(0,0,0,.54);letter-spacing:1px;}
.table-shop tr {cursor:pointer !important;}
.table-shop tr td{padding:15px 0 !important;padding-left: 24px !important;vertical-align:middle !important;font-weight:600;font-size:14px;background-origin:padding-box;}
.table-shop tr td a {border-radius:5px;padding:7.5px;color:white;}
.table-shop tr td a:hover {background-color:#378c31;}
.table-shop tr td a.add-to-card {background-color:#4BB543;}
.table-shop tr td a.add-to-card:hover {background-color:#387c31;}
.table-shop tr:hover td a.add-to-card{background-color:#378c31;}
.table-shop td:last-child {padding-right:24px !important;text-align:right;}

.table-cart {margin-bottom:50px;}
.table-cart input {width:55px;padding-left:5px;}

/* Popup */
.non-relative-col {position:static !important;}
.product-popup {text-align: center;top:0;left:0;width:100%;height:100%;position:absolute;background:rgba(0,0,0,0.3);}
.product-inner-container {padding:50px;background-color:white;display:inline-block;position: relative;top: 50%;transform: translateY(-50%);}

JavaScript

$(".product-item").click(function () {
  $(".popup-div").append(
    "<div class='product-popup'>"
    +
    "<div class='product-inner-container'>"
    +
    "<a class='testing' style='width:50px;height:50px;background-color:black;display:block;'>"
    +
    "</a>"
    +
    "<div class='popup-sku'>"
    +
    $(this).find('.product-sku').text()
    +
    "</div>"
    +
    "<div class='popup-name'>"
    +
    $(this).find('.product-name').text()
    +
    "</div>"
    +
    "<div class='popup-price'>"
    +
    "€" + $(this).find('.product-price').text()
    +
    "</div>"
    +
    "</div>"
    +
    "</div>"
  );


});
$(".testing").click(function () {
  if ($(".product-popup").length >= 1) {
    console.log("works");
    $(".product-popup").fadeOut();
  }
});

先谢谢您。以前没有这个答案。

jQuery“单击”功能淡出不起作用

0 个答案: