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