CODEWITHSUNDEEP
javascriptjquery
McCoy
McCoy

Reputation: 105

Jquery close button works on some divs

I have been working on this for a while and I cant seem to figure it out. I have a clickable jquery map of the United States that when you click a state it will open up a list of links for that state. I am using the U.S Map plugin (http://newsignature.github.io/us-map/#usage-style-options).

The weird part that I can't figure out is when I click California, the jquery I wrote to use with the plugin works as expected but when you click the other states it does not. I will provide the url of my test site if you want to see for yourself what it is suppose to be doing. First click California and then close the modal window with the X in the corner then try another state and you will see that the close button does not work. California can be opened and closed repeatedly with no problem.

Here is the test url: http://test.sportdirections.com/restaurants.php

Here is my Jquery code

var mouseX;
var mouseY;
$(document).mousemove( function(e) {
    mouseX = e.pageX-200;
    mouseY = e.pageY-500;
});  

$('#map').usmap({
    // The hover action..
    mouseover: function(event, data){
        $('#restaurant-hover-'+data.name).css({'top':mouseY,'left':mouseX}).fadeIn(500);    
    },

    // Hover away action
    mouseout:function(event, data){
        $('#restaurant-hover-'+data.name).fadeOut('fast');
    },

    // State clicked action
    click:function(event, data) {
        function closeList () {
            $('#loading').hide();
            $('#links-'+data.name).fadeOut('fast');
        }
        $('#close').click(closeList);
        $('#loading').show();
        $('#links-'+data.name).fadeIn(1000);

    }
});

Upvotes: 0

Views: 64

Answers (1)

Kierchon
Kierchon

Reputation: 2289

Look at the html being generated. Every single popup has the same input each with the same id being close. This is giving you your problem because you cannot have more than one html element with the same ID.

You are creating the popups with the id links-STATE. See if you can do something similar for the close button or use a class then jQuerys find() or parent() selectors to close the popup

Upvotes: 5

Related Questions