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 ing from the other file

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 ing from the other file

• javascript
• jquery
• html

• is this anchor dynamically added? – guradio Commented Mar 13, 2017 at 7:42
• Yes it is <a href="#" class='addname' title='<?php echo $fname; ?>'> – Mark Alan Commented Mar 13, 2017 at 7:42
• then use event delegation – guradio Commented Mar 13, 2017 at 7:42
• Possible duplicate of Event binding on dynamically created elements? – guradio Commented Mar 13, 2017 at 7:43
• 1 try adding "e.preventDefault();" – Neil Commented Mar 13, 2017 at 7:45

4 Answers 4

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

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();
});

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.

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();
});
});