I'm just try to replace the content of a div with new content binded to a click event.
When I use appendTo() instead of of html() it's working, but I need to clear the old content out so I'm a bit confused why this is not working like it should do
You are using content in place of selector and selector in place of content, you need to use # with id selctor. you can do it this way
function showitnow() {
var div_data = "<div ><a href='XXX'>XXX</a></div>";
$("#test1").html(div_data);
}
$("#button1").click(function() {
showitnow();
});
You have some mistakes in your fiddle, That should be like this: http://jsfiddle.net/pCckh/3/
function showitnow() {
var div_data = "<div ><a href='XXX'>XXX</a></div>";
$("#test1").html(div_data);
// ^---selector----^----------your content
}
$("#button1").click(function() {
showitnow();
// ^----------------remove the var and just call the function when click the button
});
maybe u can try this..
playing your JQuery as parent and child..
<div id="Destination">
<div class="child_content"> item 1 </div>
<div class="child_content"> item 2 </div>
</div>
<div id="Source">
<div class="child_content"> item 1 </div>
<div class="child_content"> item 2 </div>
</div>
<script type="text/javascript">
$(document).ready(function(){
$("#Source .child_content").click(function(){
$(this).parent().remove();
$(this).appendTo("#Destination");
});
});
</script>
Hope this helpfull..
Please have a look! Expected result...
Only few modification required in same example.
<div id = 'div_data'>
<button id="button1">BUTTON1</button>
div>
<div id="test2"></div>
