Question

I have two bits of code, nearly the same

<div class="favButtonHolder" alt="{% url inturl int.id %}">
        {% if int in user.get_profile.favorites.all %} 
            <div class="favorite favButton" style="display:none;">Favorite</div>
            <div class="favorited favButton">Favorite</div>
        {% else %}
            <div class="favorite favButton">Favorite</div>
            <div class="favorited favButton" style="display:none;">Favorite</div>
        {% endif %}
    </div>

and

<div class="favButtonHolder" alt="{% url inturl result.object.id %}">
    {% if result.object in user.get_profile.favorites.all %} 
        <div class="favorite favButton" style="display:none;">Favorite</div>
        <div class="favorited favButton">Favorite</div>
    {% else %}
        <div class="favorite favButton">Favorite</div>
        <div class="favorited favButton" style="display:none;">Favorite</div>
    {% endif %}
</div>

And some matching jQuery:
$(document).ready(function() {

    // Selecting Favorites
    $('.favButtonHolder').click(function() {
        var container = $(this);

        $.get( container.attr('alt'), {'fav': 1}, function() {
            container.find('.favButton').toggle();
        });

    });
});

For some reason, when I toggle on the first bit of code, it works just fine. It hides the proper div and displays the proper div.

For some unknown reason, when I toggle on the second bit of code, it flips for just a few milliseconds and then flips back (hidden becomes block, and then hidden almost immediately, and vice versa). It is executing the GET, but not toggling properly.

Why would this happen?

Answer 1

Making an answer out of my comment

---

Check your JavaScript files to see if you’ve duplicated the code you posted. If it’s present in two places, when the .click() event fires, two GET requests and two .toggle()s will be triggered, cancelling each other out in respect to the latter. Check your JS files for duplicate code (as you have) and remove it to fix your problem.