I have a <button>
with the rel="example.jpg"
. I want the button to load the image in my #area
DIV, just after clicking on it, not with the page load. So I use this code and everything is done:
$(document).ready(function(){
$("button").click(function(){
var imgUrl = $(this).attr('rel');
$("#area").html("<img src='" + imgUrl + "' alt='description' />");
});
});
<button rel="example.jpg">Click Me</button>
<div id="area"></div>
Here is its jsfiddle.
Now I found that the rel
is not valid for the <button>
.
I'm interested to know other solutions to do this, such as using jquery .data()
I have a <button>
with the rel="example.jpg"
. I want the button to load the image in my #area
DIV, just after clicking on it, not with the page load. So I use this code and everything is done:
$(document).ready(function(){
$("button").click(function(){
var imgUrl = $(this).attr('rel');
$("#area").html("<img src='" + imgUrl + "' alt='description' />");
});
});
<button rel="example.jpg">Click Me</button>
<div id="area"></div>
Here is its jsfiddle.
Now I found that the rel
is not valid for the <button>
.
I'm interested to know other solutions to do this, such as using jquery .data()
3 Answers
Reset to default 3HTML
<button data-rel="example.jpg">Click Me</button>
jQuery
$("button").click(function () {
var imgUrl = $(this).data('rel');
$("#area").html("<img src='" + imgUrl + "' alt='description' />");
});
Change your code to this:
$(document).ready(function(){
$("button").click(function(){
var imgUrl = $(this).data('rel');
$("#area").html("<img src='" + imgUrl + "' alt='description' />");
});
});
<button data-rel="example.jpg">Click Me</button>
<div id="area"></div>
Fiddle: http://jsfiddle/x3QdU/4/
change
<button rel=
to
<button data-rel=
http://jsfiddle/x3QdU/1/