on click event not working with anchor tag

Question

I have created a script onClick function not working with anchor tag I don't know why I am clicking on it and nothing is happening

$(".addname").on("click", function() {
  var username = $(this).attr('title');
  var old = $("#contentbox").html();
  var content = old.replace(word, "");
  $("#contentbox").html(content);
  var E = "<a class='red' contenteditable='false' href='#' >" + username + "</a>";
  $("#contentbox").append(E);
  $("#display").hide();
  $("#msgbox").hide();
  $("#contentbox").focus();
});



<div id="contentbox" contenteditable="true"></div>


if($_POST)
{
$q=$_POST['searchword'];
$q=str_replace("@","",$q);
$q=str_replace(" ","%",$q);
$sql_res=mysql_query("select * from users where name like '%$q%' order by id LIMIT 5");
while($row=mysql_fetch_array($sql_res))
{
$fname=$row['name'];


?>
<div class="display_box" align="left">
<img src="user_img/test.jpg" class="image"/>
<a href="#" class='addname' title='<?php echo $fname; ?>'>
<?php echo $fname; ?> </a><br/>
<?php
}
}
?>

Please see my above question now as of I am adding data dynamically and the button adding dynamically is included within the dynamic data coming from the other file

Answer 1

Place the code in document . ready document . ready or place it just before the the ending of body tag to allow the DOM to load first before loading of JS.

Answer 2

Try this fiddle, it works and it may help you, I also added the js for your convenience:

jsfiddle onclik event

$(".addname").on("click", function() {
  var username = $(this).attr('title');
  var old = $("#contentbox").html();
  var content = old.replace("word??", "");
  $("#contentbox").html(content);
  var E = $("<a class='red' contenteditable='false' href='#'>" + username + "</a>");
  E.on("click", function() {alert('dynamic anchor clicked!')});
  $("#contentbox").append(E);
  $("#display").hide();
  $("#msgbox").hide();
  $("#contentbox").focus();
});

Answer 3

What might happen is that by clicking the anchor, the href gets fired, but since it's # , nothing will happen.

So you want to stop this default action, you can to that by using e.preventDefault() :

$(".addname").on("click", function(e) {
  e.preventDefault();
  var username = $(this).attr('title');
  var old = $("#contentbox").html();
  var content = old.replace(word, "");
  $("#contentbox").html(content);
  var E = "<a class='red' contenteditable='false' href='#' >" + username + "</a>";
  $("#contentbox").append(E);
  $("#display").hide();
  $("#msgbox").hide();
  $("#contentbox").focus();
});

Please note the extra e in function(e) as well.

Answer 4

Add you code in document.ready event, if not added already. Like below,

$(document).ready(function(){
$(".addname").on("click", function() {
  var username = $(this).attr('title');
  var old = $("#contentbox").html();
  var content = old.replace(word, "");
  $("#contentbox").html(content);
  var E = "<a class='red' contenteditable='false' href='#' >" + username + "</a>";
  $("#contentbox").append(E);
  $("#display").hide();
  $("#msgbox").hide();
  $("#contentbox").focus();
});
});