-1

Good day to all programmers over there but I have some problems which the html code from javascript doesn't work. I append this code but can't click after showing on the html <div id="result"></div>

$('#result').append('<div class="col-large-4 col-md-4 col-sm-12 float-left"><div class="col-md-12 column thumbnailbox"><img src="img/IMAGE.png" style="position: absolute; width: 32px; height: 32px; margin-left: 5px; margin-top: 5px;" ></img><img src="https://instagram.fmnl4-6.fna.fbcdn.net/t51.2885-15/s640x640/sh0.08/e35/c135.0.810.810/22636828_1183035351797075_5642980100820434944_n.jpg" style="width: 100%;"></img><div class="thumbnailtitle"><button href="#" class="btn-download btn btn-block btn-danger btn-sm" role="button">DOWNLOAD IMAGE</button></div></div></div>';

It appends but can't click the link on href

Thanks in advance for helping.

Marverick M.
  • 124
  • 1
  • 15
  • Look for **event delegation** as you elements are dynamic so any previously attached event listeners won't work on them unless they're (the event listeners) in delegation mode. – ibrahim mahrir Oct 22 '17 at 14:32
  • I found a little bit of a solution by removing the pull-left it will finally worked but the problem is the design, removing the pull-left will destroy everything – Marverick M. Oct 22 '17 at 14:44

2 Answers2

2

button elements don't have href attributes. You need to use an a element. You can style it like a button:

<a href="#" class="button">Click Me</a>
Nick
  • 16,066
  • 3
  • 16
  • 32
2

You need something like this in the append: it opens a new tab with the image, someone can save it.

Notice I have changed button into anchor 

<div class="col-large-4 col-md-4 col-sm-12 float-left"><div class="col-md-12 column thumbnailbox"><img src="img/IMAGE.png" style="position: absolute; width: 32px; height: 32px; margin-left: 5px; margin-top: 5px;" ></img><img src="https://instagram.fmnl4-6.fna.fbcdn.net/t51.2885-15/s640x640/sh0.08/e35/c135.0.810.810/22636828_1183035351797075_5642980100820434944_n.jpg" style="width: 100%;"></img><div class="thumbnailtitle"><a href="https://instagram.fmnl4-6.fna.fbcdn.net/t51.2885-15/s640x640/sh0.08/e35/c135.0.810.810/22636828_1183035351797075_5642980100820434944_n.jpg" class="btn-download btn btn-block btn-danger btn-sm" role="button" target="_blank">DOWNLOAD IMAGE</a></div></div></div>

Or you may need to open a link to a page that forces download.

Samuel Ngoda
  • 64
  • 2