Question

So I built a contact form thing. It works flawlessly, but when called with a + id, it only works in a certain spot. If I put the a somewhere else, it stops working.

So I have my index.html, which dynamically loads the header (and footer). One of the links in the header is "contact" and instead of href it has an ID to run my script, which opens a pop-up contact form.

Below is index.html

<!doctype html>
<html lang="en">

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta name="description" content="" />
    <meta name="author" content="Sebastian Alsina" />

    <title>London Amara </title>

    <!-- CSS -->
    <link rel="stylesheet" href="css/londonamara.css" type="text/css">
    <link rel="stylesheet" href="sendmail/sendmail.css" type="text/css">
    <link rel="stylesheet" href="css/master.css" type="text/css">
    <link rel="stylesheet" href="css/reset.css" type="text/css">

    <!-- JS -->
    <script src="sendmail/sendmail.js"></script>
    <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
</head>

<body>
    <script>
        $(document).ready(function () {
            $.get("includes/header.html", function (data) {
                $("#header").html(data);
            });

            $.get("includes/footer.html", function (data) {
                $("#footer").html(data);
            });
        });
    </script>

    <div id="header"></div>

    <div class="logoBar">
        <!-- Logo here -->
    </div>
    <div class="showBox">
        <!-- Logo here -->
    </div>
    <div class="quoteBar">
        <div class="contain">
            <p class="quote">"This is a quote that some artist woman said, it was very inspirationl and moving, I am now a man."</p>
            <p class="person">&#45; London Amara</p>
        </div>
    </div>
    <div class="linkBar">
        <a href="" class="a">Art</a>
        <a href="" class="b">Power</a>
        <a href="" class="c">Beauty</a>
        <div class="clear"></div>
    </div>
    <div class="body">body</div>

    <div id="footer"></div>

</body>

</html>

Here is the header.html, which contains the a's.

<script>
    $(document).ready(function () {
        $("#moreBtn").hover(function () {
            $(".moreMenu").show();
        }, function () {
            $(".moreMenu").hide();
        });
        $(".moreMenu").hover(function () {
            $(".moreMenu").show();
        }, function () {
            $(".moreMenu").hide();
        });

        $(".mobileNavBtn").click(function () {
            $(".mobileNav").slideToggle();
        })

        sendMail();
    });
</script>

<!-- THIS ONE WORKS! -->
<a id="toggleSendMail">send me a message</a>

<div class="mobileNav">
    <a href="index.html">Home</a>
    <a href="portfolio.html">Portfolio</a>
    <a href="artist-bio.html">Artist Bio</a>
    <a href="blog.html">Blog</a>
    <a id="toggleSendMail">send me a message</a>
    <a href="videos.html">Videos</a>
    <a href="representation.html">Representation</a>
    <a href="calendar.html">Calendar</a>
    <a href="books.html">Books</a>
    <!--    <a id="moreBtn" class="more">More &#x25BE;</a>-->
    <div href="#last" class="moreMenu">
        <a href="catalog.html">Catalog</a>
        <a href="art-fair.html">Art Fair</a>
        <a href="free-press.html">Free Press</a>
        <a href="reviews.html">Reviews</a>
        <a href="history.html">History</a>
        <a href="public-collections.html">Public Collections</a>
        <a id="last" href="private-collections.html">Private Collections</a>
    </div>
</div>
<div class="mobileNavBtn">Menu</div>

<div class="navs">
    <div class="navBar">
        <a href="index.html">Home</a>
        <a href="portfolio.html">Portfolio</a>
        <a href="artist-bio.html">Artist Bio</a>
        <a href="blog.html">Blog</a>
        <!-- THIS ONE DOES NOT WORK! -->
        <a id="toggleSendMail">send me a message</a>
    </div>

    <div class="secondaryNavBar">
        <a href="videos.html">Videos</a>
        <a href="representation.html">Representation</a>
        <a href="calendar.html">Calendar</a>
        <a href="books.html">Books</a>
        <a id="moreBtn" class="more">More &#x25BE;</a>
        <div class="clear"></div>
    </div>

    <div class="moreMenu">
        <a href="catalog.html">Catalog</a>
        <a href="art-fair.html">Art Fair</a>
        <a href="free-press.html">Free Press</a>
        <a href="reviews.html">Reviews</a>
        <a href="history.html">History</a>
        <a href="public-collections.html">Public Collections</a>
        <a href="private-collections.html">Private Collections</a>
    </div>
</div>
<div class="navsSpacer"></div>

So, as you can see, the send me a message on line 22 works and successfully calls the script, but the send me a message on line 53 does not work. They have the same ID, so I am absolutely baffled as to why this is not working...any help would be appreciated.

The working and non-working a's are commented for visibility.

You can see my live demo here: www.londonamara.com/beta. As you can see, clicking on "send me a message" at the very top of page works, but clicking on the "send me a message" in the upper navBar does not work.

Thanks in advanced.

<a> with ID only working in one spot?

0 个答案: