Question

onclick 函数无法在 .append 中起作用？

2015-03-03

3368

javascript jquery html css

我尝试使用 javascript 和 jquery 创建 div 标签。我尝试将 onclick 函数应用于 div 标签，但这不起作用？

var header = '<div id = "header" style="height:150px; width:500px; background:#a2a2a2;" ></div>';
document.body.insertAdjacentHTML('beforeend',header);
$("#header").append('<div id="con" style="height:20%; width:30%; background:orange;" onclick="alert('hello world')"></div>');

在代码中，我在 div id="con" 标签内使用了 onclick 函数，但不起作用？但我使用了

$("#header").append('<div id="con" style="height:20%; width:30%;  background:orange;" onclick="mufunc();"></div>');
function mufunc(){
alert("hello world");
}

在此代码中，onclick 函数起作用。

我需要提醒 <div> 内的代码，我该怎么做？这两个函数有什么区别？

Answer 1

问题在于引用。 hello world 之前的 ' 与 append() 参数开头的 ' 匹配，因此它结束了该字符串。您需要转义字符串内的引号。

$("#header").append('<div id="con" style="height:20%; width:30%; background:orange;" onclick="alert(\'hello world\')"></div>');

Answer 2

您可以使用 jQuery 动态绑定 onclick 事件

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"        
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="da" lang="da">
<head>
  <title>test of click binding</title>

  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" type="text/javascript"></script>
  <script type="text/javascript">


jQuery(function(){
  close_link = $('<a class="" href="#">Click here to see an alert</a>');
  close_link.bind("click", function(){
    alert('hello from binded function call');
    //do stuff here...
  });

  $('.add_to_this').append(close_link);
});
  </script>
</head>
<body>
  <h1 >Test of click binding</h1>
  <p>problem: to bind a click event to an element I append via JQuery.</p>

  <div class="add_to_this">
    <p>The link is created, then added here below:</p>
  </div>

  <div class="add_to_this">
    <p>Another is added here below:</p>
  </div>


</body>
</html>

Answer 3

尝试像这样替换 $("#header") 行：

$("#header").append('<div id="con" style="height:20%; width:30%; background:orange;" onclick="alert("hello world")"></div>');

我只是在 hello world 周围插入了 (") 而不是 (')。