jquery on() with addClass/removeClass

Question

我有这个脚本，需要在iPad上运行。它正在与live一起处理chrome，但是，将其移动到on会使它无响应。

任何想法，我将不胜感激！

$("#clickAll").on("click", function () {
    $(".welcome1poi").show();
    $(this).addClass("active");
});
$("#clickAll.active").on("click", function () {
    $(this).removeClass("active");
    $(".welcome1poi").hide();
});

Answer 1

试试这个

$("#clickAll").on("click", function(){
    $(".welcome1poi").toggle();
    $(this).toggleClass("active");
});

更新

如建议

$(document).on('click',"#clickAll", function(){
    $(".welcome1poi").toggle();
    $(this).toggleClass("active");
});

由于它正在使用 live（），我假设您的 id clickAll 元素是动态添加的，所以试试这个

$(document).on("click","#clickAll", function () {
   $(".welcome1poi").show();
   $(this).addClass("active");
});
$(document).on("click","#clickAll.active", function () {
  $(this).removeClass("active");
   $(".welcome1poi").hide();
});

您可以将$(document)选择器替换为最接近#clickAll元素的元素，这将更有效

Answer 2

这会将事件委托给body，当它冒泡 DOM 时，它将被捕获。

$('body').on("click", "#clickAll", function(){
    $(".welcome1poi").show();
    $(this).addClass("active");
});
$('body').on("click", "#clickAll.active", function(){
    $(this).removeClass("active");
    $(".welcome1poi").hide();
});

Answer 3

您是否添加和删除"活动"类以创建切换效果？如果是这样，请尝试 .toggle（），如下所示：

$('#clickAll).toggle(
    function() { $('.welcome1poi').show(); }, 
    function() { $('.welcome1poi').hide(); });