Question

我将页面上另一个div的HTML注入div，然后添加一个.show类，如下所示：

<platform name="android">
<resource-file src="resources/onesignal/drawable-xxxhdpi/ic_stat_icon.png" />
</platform>

注入的HTML是：

var $boxItem = $('.box-grid__item'),
    $htmlData = $($boxItem).find('.box-grid__item-content').html();
$boxItem.click(function () {
    $('.box-grid__item-content-popup').html($htmlData).addClass('show');
});

这可以按预期工作，但现在我想删除.show。我试过了这个，但它没有开火：

<div class="close-btn" aria-label="Close">
    <span></span>
    <span></span>
</div>
<h2 class="box-grid__item-content-heading">Name and Surname</h2>
<p class="box-grid__item-content-title">Title</p>
<p class="box-grid__item-content-text">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>

任何帮助将不胜感激;）

Answer 1

由于您是动态插入HTML，因此您的事件处理程序应类似于：

$('.box-grid__item-content-popup').on("click", '.close-btn', function () {
    $('.box-grid__item-content-popup').removeClass('show');
})

这意味着将捕获冒泡到.box-grid__item-content-popup的事件，但在.close-btn或其中一个后代触发事件时，处理程序将触发。

参考：请参阅http://api.jquery.com/on/

中的委派活动部分

Answer 2

我假设你在插入html之前有.click代码。您可以做的是重写您的函数，因此它会在.box-grid__item上触发，然后在其上放置一个选择器。

$(".box-grid__item").on("click", ".close-btn", function(){
      $('.box-grid__item-content-popup').removeClass('show');
 });

Answer 3

// create a reference to the old `.html()` function
var htmlOriginal = $.fn.html;

// redefine the `.html()` function to accept a callback
$.fn.html = function(html,callback){
  // run the old `.html()` function with the first parameter
  var ret = htmlOriginal.apply(this, arguments);
  // run the callback (if it is defined)
  if(typeof callback == "function"){
    callback();
  }
  // make sure chaining is not broken
  return ret;
}

// test it all works as expected (including chaining)
$("#mything").html("<div>My Thing</div>",function(){
  console.log("Just did my thing");
}).css({color: 'red'})

请参阅fiddle

在.html（）之后做了一些事情

3 个答案: