Question

我不想要动态代码。最初我给动画从右到左移动，然后我想回到相同的位置，所以我要更换css以带回部分。

因此我添加了现有的类并添加了新的类。但是在添加了类单击功能后，这里没有工作。

$(document).ready(function () {
    $(".leftIcon").click(function () {
        $(".leftPan").animate({left: '-250px'});
        $(".leftIcon i").css({'transform': 'rotate(-180deg)'});
        $(this).addClass("leftIcon-enLarged");
        $(this).removeClass("leftIcon");
    });

    $(".leftIcon-enLarged").click(function () {
        $(".leftPan").animate({left: '0px'});
        $(".leftIcon-enLarged i").css({'transform': 'rotate(-180deg)'});
        $(this).addClass("leftIcon");
        $(this).removeClass("leftIcon-enLarged");
    });

});

我没有动态代码..我只需要静态。

Answer 1

当您动态添加新类时，必须使用$(document).on()，如：

$(document).on('click', '.leftIcon', function(){
  // your code here
});

Answer 2

为什么不直接使用$(document).on('click', '.leftIcon-enLarged', function () {？

Answer 3

您可以将$(document).on('click')事件用于动态内容。

$(document).ready(function () {
    $(document).on('click', '.leftIcon', function(){
        $(".leftPan").animate({left: '-250px'});
        $(".leftIcon i").css({'transform': 'rotate(-180deg)'});
        $(this).addClass("leftIcon-enLarged");
        $(this).removeClass("leftIcon");
    });

    $(document).on('click', '.leftIcon-enLarged', function(){
        $(".leftPan").animate({left: '0px'});
        $(".leftIcon-enLarged i").css({'transform': 'rotate(-180deg)'});
        $(this).addClass("leftIcon");
        $(this).removeClass("leftIcon-enLarged");
    });

});

通过jquery添加类名后，单击功能不起作用，不需要动态代码

3 个答案: