javascript - 带有 addClass/removeClass 的 jquery on()

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(); });