Question

我需要在运行IE 8的环境中运行它。有关为什么'setAttribute'设置onclick的任何建议，但它实际上不能正常工作（单击时不触发）。我已经查看了其他示例，但是当我点击表格中的内容时仍然无响应。只有预先存在的p标签才能运行onclick功能。

<!DOCTYPE html>
<html>
<head>
<title>Test Video</title>
<!-- meta -->
<script>    
    var list = ["test", "test2", "test3"];

    function buildTable() {
        document.getElementById('tableArea').innerHTML = "<table border='1' id='mytable'><tbody><tr><td>Video Title</td></tr></tbody></table>";
        for(i = 0; i < list.length; i++) {
            addRow(list[i]);
        }
    }

    function addRow(content) {
         if (!document.getElementsByTagName) return;
         tabBody=document.getElementsByTagName("tbody").item(0);
         row=document.createElement("tr");
         cell1 = document.createElement("td");
         cell1.setAttribute ('onclick', 'getName(' + content + ');');
         textnode1=document.createTextNode(content);
         cell1.appendChild(textnode1);
         row.appendChild(cell1);
         tabBody.appendChild(row);
    }

    function getName(fileName){
    alert("hello");
        /*var htmlPlayer = '<embed type="application/x-mplayer2"' +
                        'name="mediaplayer1" autoplay="false" autostart="true"' +
                        'width="900" height="600" loop="false" controls="false"' +
                        'allowFullscreen="True"' +
                        'src="'+ fileName +'.avi">' +
                        '</object>';
        document.getElementById('videoPlayer').innerHTML = htmlPlayer;*/
    }

</script>
</head>
<body>

    <h1>Page One</h1>

    <p id="videoPlayer">
        <embed type="application/x-mplayer2" 
            name="mediaplayer1" autoplay="false" autostart="false" 
            width="900" height="600" loop="false" controls="false" 
            allowFullscreen="True" src="">
        </object> 
    </p>

    <p onclick='getName("test");'>test</p>
    <p onclick='getName("test2");'>test2</p>
    <p onclick='getName("test3");'>test3</p>

    <p id="tableArea"></p>
    <script>buildTable();</script>
</body>
</html>

Answer 1

更改

cell1.setAttribute ('onclick', 'getName(' + content + ');');

到

cell1.setAttribute ('onclick', 'getName("' + content + '");');//notice the quotes

您想发送一个字符串，而不是一个未定义的对象，因此需要双引号来表明您传递的是字符串而不是对象。

- 编辑 - 工作示例

＆＃13;

var list = ["test", "test2", "test3"];

function buildTable() {
  document.getElementById('tableArea').innerHTML = "<table border='1' id='mytable'><tbody><tr><td>Video Title</td></tr></tbody></table>";
  for (i = 0; i < list.length; i++) {
    addRow(list[i]);
  }
}

function addRow(content) {
  if (!document.getElementsByTagName) return;
  tabBody = document.getElementsByTagName("tbody").item(0);
  row = document.createElement("tr");
  cell1 = document.createElement("td");
  cell1.setAttribute('onclick', 'getName("' + content + '");');
  textnode1 = document.createTextNode(content);
  cell1.appendChild(textnode1);
  row.appendChild(cell1);
  tabBody.appendChild(row);
}

function getName(fileName) {
  alert("hello");
  /*var htmlPlayer = '<embed type="application/x-mplayer2"' +
                  'name="mediaplayer1" autoplay="false" autostart="true"' +
                  'width="900" height="600" loop="false" controls="false"' +
                  'allowFullscreen="True"' +
                  'src="'+ fileName +'.avi">' +
                  '</object>';
  document.getElementById('videoPlayer').innerHTML = htmlPlayer;*/
}

buildTable();

＆＃13;

<h1>Page One</h1>

<p id="videoPlayer">
  <embed type="application/x-mplayer2" name="mediaplayer1" autoplay="false" autostart="false" width="900" height="600" loop="false" controls="false" allowFullscreen="True" src="">
  </object>
</p>

<p onclick='getName("test");'>test</p>
<p onclick='getName("test2");'>test2</p>
<p onclick='getName("test3");'>test3</p>

<p id="tableArea"></p>

＆＃13;

Answer 2

在这种情况下，您缺少onclick属性的引号

cell1.setAttribute ('onclick', 'getName(\'' + content + '\');');

除了字符串连接之外，您可能还想想另一种传递内容的方法。您可以创建一个可以访问内容变量的闭包函数。

cell1.onclick = function(){ getName(content); };

或者，如果您的元素将包含该名称，则可以将其innerHTML传递给getName。

cell1.onclick = function(){ getName(this.innerHTML); };

Answer 3

为了成功绑定到动态创建的元素，您需要定位其包装器。

例如：

$(wrapper).on('click', targetElement, function(){
 ....the behavior you want
});

您可以查看此博文以获取更多信息：http://blog.ning-xia.com/accessing-dynamically-created-elements-with-jquery/

Onclick不会触发动态创建的td标记

3 个答案: