Question

我尝试使用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与开始参数'的{{1}}匹配，因此结束该字符串。您需要转义字符串中的引号。

append()

Answer 2

尝试替换$（“＃header”）行，如下所示：

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

我刚插入（“）而不是（'）唤醒你好的世界。

Answer 3

您可以执行Jquery的.click功能

$(#con).click(function() {alert( "Handler for .click() called." );});

此处a link是

的参考样式链接

Answer 4

您可以使用 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>

onclick函数无法正常工作.append？

4 个答案: