Question

我创建了一个不使用锚标记的脚本onClick函数我不知道为什么我点击它并且什么也没发生

$(".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
}
}
?>

现在请查看我的上述问题，因为我正在动态添加数据，动态添加的按钮包含在来自其他文件的动态数据中

Answer 1

将代码放在document . ready中，或者将其放在body标记结尾之前，以便在加载JS之前先加载DOM。

Answer 2

尝试这个小提琴，它有效，它可能对你有帮助，我还为你的方便添加了js：

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

可能会发生的情况是，通过点击锚点，href会被触发，但由于它是#，所以不会发生任何事情。

因此，您希望停止此默认操作，您可以使用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();
});

请注意e中的额外function(e)。

Answer 4

在document.ready事件中添加代码（如果尚未添加）。如下所示，

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

点击事件无法使用锚标记

4 个答案: