Question

我在下面有javascript / html。当用户点击“心脏”或“煤炭”时，它会切换到相反的位置。但是，它只适用于1次点击。如果我点击'heart'一次，它会变成'煤'......但如果我现在点击'煤'，它就不会再变成'心'了。关于如何解决这个问题的任何想法？

<script>
    $(document).ready(function(){
        $('.like').click(function (e) {
            $(this).parent().html("<a href = '#' class = 'unlike'><div class = 'heart'></div></a>");
            console.log('liked');
            return false;            
        })

        $('.unlike').click(function (e) {
            $(this).parent().html("<a href = '#' class = 'like'><div class = 'coal'></div></a>");
            console.log('unliked');
            return false;            
        })
    })
 </script>


                       <div>
                    <a href = "#" class = 'unlike'>
                        <div class = "heart"></div>
                    </a>
                  </div>

Answer 1

使用

$('body').on('click', '.like', function () {
});

Answer 2

您面临的问题是因为您正在动态添加元素（通过销毁和重新创建它），并且新元素没有绑定到它的事件点击处理程序。

解决方案是使用事件委托，您可以使用jQuery on。

另一个解决方案是不是一次又一次地创建被点击的元素，添加一个泛型类，并在其单击中更改内部HTML并切换like /不同类。

代码：

<div> <a href="#" class='handler unlike'>
    <div class = "heart">aa</div>
</a></div>

JS：

$(document).ready(function () {
    $('.handler').click(function (e) {
        if ($(this).hasClass('like')) {
            $(this).html("<div class = 'heart'>aa</div>");
        } else {
            $(this).html("<div class = 'coal'>bb</div>");
        }

        $(this).toggleClass('unlike');
        $(this).toggleClass('like');
        return false;
    })

})

演示：http://jsfiddle.net/At3D9/

Answer 3

@meavo是正确的。

以下是一个示例jsfiddle，其代码示例与您发布的内容类似。

http://jsfiddle.net/Q2pDG/

$(document).on("click", '.like', function (e) {
    $(this).parent().html("<a href = '#' class = 'unlike'><div class = 'heart'></div></a>");
    return false;
});

$(document).on("click", '.unlike', function (e) {
    $(this).parent().html("<a href = '#' class = 'like'><div class = 'coal'></div></a>");
    return false;
});

如何使用javascript修复点击功能？

3 个答案: