Separate links made via jQuery/JSON worked fine on click before, now only one button is working while others are not clickable

Question

I’m having an issue where all of the separate links to the codepens stopped triggering on click of button except for the last one, which works fine. Anybody know what could be causing this? https://studiosemantica.com is where the live site is, and also including my code.

I have tried moving the .attr('href', project.url)to the second tag , removing the button and replacing it with just , tryied doubling up on the .attr('href', project.url)by adding to the second , all to no avail. I'm not sure if this is an issue that can be cause by CSS styling?

JAVASCRIPT/jQuery CODE


// all application logic is included inside the app() function    
const app = (projects) => {

    // creates a jQuery DOM element based on an individual project object
    const createProjectElement = (project) => {
        const $div = $('<div>').addClass("project")
        const $divOverlay = $('<div>').addClass("overlay")
        const $overlayText = $('<div>').addClass("overlayText").append($('<h2>').text(project.title))
        const $imageDiv = $('<div>').addClass("imageDiv").append($('<img>').attr('src', project.image))
        // $div.append($('<h2>').text(project.title))
        $div.append($($divOverlay).append($($overlayText).append($($imageDiv))))
        $div.append($('<p>').addClass("description").text(project.description))
        $div.append($('<button>').append($('<a>').addClass("list-group-item").attr('href', project.url).append($('<i>').addClass("fa fa-codepen").append($('<a>').addClass("small").text('Live Demo')))))

        return $div
    }

    // adds each project element to <body>
    projects.forEach(project => {
        const $projectDiv = createProjectElement(project)
        $('body').append($projectDiv)
    })

}

CSS

.project {
    display:flex;
    flex-direction:column;
    text-align:center;
    margin:35px auto auto auto;
    border:2px solid black;
    width:250px;
    height:360px;
    background-color:white;
}

.overlay {
    display:flex;
    flex-direction:column;
    justify-content:space-around;
    z-index:999;
    width:250px;
    margin-bottom:130px;
    margin-top:0px;
    background-color:white;
    height:90px;

}

.imageDiv { 
    position:relative;
    width:100%;
    z-index:-1;
}

h2 {
    position:relative;
    text-align:center;
    font-family:"Pragati Narrow";
    background-color:rgba(000, 000, 000, 0.2);
    padding-top:60px;
    padding-bottom:60px;
    color:white;
    z-index:999;
    top:190px;
    left:0 auto;
    width:100%;
}

img {
    width: 250px;
    height:160px;
    margin:10px auto;
}


button {
    background-color:rgba(000, 000, 000, 0.2);
    width:150px;
    display:flex;
    flex-direction:row;
    justify-content:space-around;
    border-style:none;
    border-radius:5px;
    margin:15px auto;
    margin-top:5px;
    padding:6px;
}




.list-group-item {
    text-align:left;
    width:150px;
    font-size:25px;
    color:dimgrey;
    margin-left:25px;


}

.small {
    
    position:absolute;
    font-family:"Pragati Narrow";
    font-size:15px;
    margin-left:6px;
    margin-bottom:30px;
    margin-top:-5px;
    padding:10px 0px 20px 0px;

}

Please see edit: I actually did have return $div but I think it got erased by accident when I tried to clean up the code to ask the question. Please try to answer again, knowing that return is included and the buttons are showing up on the live site. Thank you! — studiosemantica, Jul 14 '20 at 23:57
Related: https://stackoverflow.com/questions/17253410/link-inside-a-button-not-working-in-firefox — Barmar, Jul 15 '20 at 00:23
I'm not sure why, but the `.overlayText` elements are very tall, overlapping the ` — Barmar, Jul 15 '20 at 01:03

score 0 · Answer 1 · edited Jul 15 '20 at 08:20

Your markup and styles are probably the reason why the link does not work properly. You have packed two links into each other, which results in an invalid markup. I would make the link using an 'a' tag instead of a button.

I tried to adopt your design and got the following code.

var projects = [{
  title: 'Project One',
  image: 'https://',
  description: 'Project One Description',
  url: 'https://stackoverflow.com/'
}, {
  title: 'Project Two',
  image: 'https://',
  description: 'Project Two Description',
  url: 'https://stackoverflow.com/'
}];

// creates a jQuery DOM element based on an individual project object
const createProjectElement = (project) => {
  return $('<div></div>').addClass('project')
    .append(
      $('<div></div>').addClass('project-preview').append(
        $('<h2></h2>').addClass('project-title').text(project.title),
        $('<div></div>').addClass('project-overlay'),
        $('<img/>').addClass('project-image').attr('alt', project.title).attr('src', project.iamge)
      ),
      $('<p></p>').addClass('project-description').text(project.description),
      $('<a></a>').addClass('project-link').attr('href', project.url).append(
        $('<i></i>').addClass('fa fa-codepen'),
        'Live Demo'
      )
    )
  ;
}

// adds each project element to <div class="project-list"></div>
projects.forEach(project => {
  $('.project-list').append(createProjectElement(project))
})

.project-list {
  display: flex;
  flex-direction: column;
}

.project {
  max-width: 250px;
  margin: 35px auto;
  text-align: center;
  background-color: #fff;
  font-family: "Pragati Narrow", sans-serif;
  border: 1px solid #000;
}

.project-preview {
  position: relative;
  overflow: hidden;
}

.project-image {
  width: 100%;
  min-height: 160px;
}

.project-overlay {
  position: absolute;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.4);
  z-index: 100;
}

.project-title {
  position: absolute;
  width: 100%;
  top: 50%;
  margin: 0;
  transform: translateY(-50%);
  color: #fff;
  text-align: center;
  z-index: 200;
}

.project-description {
  margin: 20px;
  padding: 0 20px;
}

.project-link {
  display: inline-block;
  margin-bottom: 20px;
  padding: 8px 20px;
  color: inherit;
  background-color: rgba(0, 0, 0, 0.2);
  text-decoration: none;
  border: none;
  border-radius: 5px;
}

.project-link .fa {
  margin-right: 12px;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" crossorigin="anonymous" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="project-list"></div>

Separate links made via jQuery/JSON worked fine on click before, now only one button is working while others are not clickable

1 Answers1