Question

我正在处理一个项目，并且在我的.ejs文件中，我有一个弹出窗口：

<div id="just-claimed-popup2" class="popup">
   <h6>You just claimed:</h6>
   <h2 id="card-just-claimed"></h2>
   <p class="show-message">Show this Screen!</p>
   <button id="deletePromoFromHome" class="close-button">Close</button>
</div>

在我的javascript文件中，我有一个代码可以在循环中创建卡片：

$('#promotion-container footer').before(`
   <div class="promo card promo${i}">
     <div class="promo-wrapper">
         <div class="promo-header">
            <h2 class="promo-title">${eventName}</h2>
            <span class="close-promo-wrapper"><span class="close-promo"></span></span>
         </div>
   <div class="promo-info">
   <span class="promo-details">
   <p class="promo-detail promo-location">${eventLocation}</p>
   <p class="promo-detail promo-date">${eventDate}</p>
   <p class="promo-detail promo-time">${eventTime}
   <span class="promo-description"></span>
   <span class="buttonRedemp${i}">
        <button class="redddButt load-button2" data="Reedem Card">Reedem Card</button>
    </span>
   </div>
  </div>
</div>
      `)

当人们单击“ redddButt”时，我希望卡消失，这是我的代码：

$(`#promotion-container .promo${i} .redddButt`).on('click', function(e){
    e.stopPropagation();
    $(`div.promo${i}`).addClass('toDelete')

    var esc = $.Event("keyup", { keyCode: 27 });
    $(document).trigger(esc);
    $('#just-claimed-popup2').addClass('reveal');
    $('#card-just-claimed').text(eventName);

    $('#deletePromoFromHome').click(function(){
        $('div.toDelete').fadeOut("slow")
    })
})

问题：它总是只删除单击的第一张卡，如果您单击另一张卡中的按钮，它将停止工作，因此只能工作一次。如果我在console.log上发生了单击事件，那只是它没有在其中运行代码。

Answer 1

尝试将您的处理程序更改为：

$('body').on('click', `#promotion-container .promo${i} .redddButt`, function(e){
  //function stuff here
}

问题可能是在附加处理程序之后生成了元素。

Answer 2

您的代码缺少一些结束标记。由于卡片是动态生成的，请尝试使用（未经测试）：

var buttonContext;

$(document).on('click', '#promotion-container .promo .redddButt', function() {
     buttonContext = $(this);
    // Something 
});

$('#deletePromoFromHome').click(function(){
    buttonContext.closest('.promo').fadeOut("slow");
});

您可以省略以下行：$(div.promo${i}).addClass('toDelete');

这些卡片可能只有一个类别（.promo）而不是（.promo＃），除非您可能想进行进一步的操作（比如说不同的样式等）。

在$(document)上检查此项以获取更多详细信息：https://stackoverflow.com/a/32066793/3906884

jQuery单击事件删除第一个元素

2 个答案: