一次附加動態div和JSFiddle問題

Question

第一次單擊表節點（添加圖像等）后，這段代碼即可完成我想要的所有操作。 但是，當單擊第二個節點時，選擇將再次出現，但出現兩次，依此類推。 有沒有辦法讓我只將元素追加一次。 我制造了這個問題的小提琴。 它可以在Chrome中運行，但不能在JSFiddle本身上運行。 也許我做錯了什么。 http://jsfiddle.net/Inkers/NyxCu謝謝。

    <html>
 <head>
    <meta name = "viewport" content="width=device-width, height= device-height, initial-scale=1.0, maximum-scale=1.0"/>
    <meta charset=UTF-8"/>
    <title>Whatever it is going to be</title>
      <script type="text/javascript" charset="utf-8" src="fiddle.js"></script>
 </head>

    <body>
  <h3>Create a new table</h3>
  <div id="holdTable">
    <form id="chartInput">
        <label for="taskname">Task</label>
        <input id="taskname" type="text" placeholder="Blah blah"><br>

        <label for="days">How many days</label>
        <input id="days" name="days" type="number" min="1" max="7"><br>

        <label for="times">How many times a day</label>
        <input id="times" name="times" type="number" min="1" max="4"> <br>

        <input id="createChart" type="button" value="Make the table" onClick="makeChart();"> <br>

    </form>
    </div>
   </body>
</html>



     var makeChart = function () {
var table = document.createElement('table'),
    taskName = document.getElementById('taskname').value,
    header = document.createElement('th'),
    numDays = document.getElementById('days').value, //columns
    howOften = document.getElementById('times').value, //rows
    row,
    r,
    col,
    c;

header.innerHTML = taskName;
table.appendChild(header);

header.innerHTML = taskName;
table.appendChild(header);

function addImage(col) {
    var img = new Image();
    img.src = "http://cdn.sstatic.net/stackoverflow/img/tag-adobe.png";
    col.appendChild(img);
    img.onclick = function () {
        var myImages = new Array();
        myImages[0] = "http://www.olsug.org/wiki/images/9/95/Tux-small.png";
        myImages[1] = "http://a2.twimg.com/profile_images/1139237954/just-logo_normal.png";
        for (var i = 0; i < myImages.length; i++) {
            var allImages = new Image();
            allImages.src = myImages[i];

            var my_div = document.createElement("div");
            my_div.id = "showPics";
            document.body.appendChild(my_div);
            var newList = document.createElement("ul");
            newList.appendChild(allImages);
            my_div = document.getElementById("showPics");
            my_div.appendChild(newList);
            my_div.style.display = 'block';

            allImages.onclick = function (e) {
                img.src = e.target.src;
                my_div.style.display = 'none';
            };
        }
    };
};
for (r = 0; r < howOften; r++) {
    row = table.insertRow(-1);
    for (c = 0; c < numDays; c++) {
        col = row.insertCell(-1);
        addImage(col);
    }
}
document.getElementById('holdTable').appendChild(table);
};

Answer 1

我有辦法只將元素追加一次嗎？

是。 只需將以下行放在函數的末尾，因此它只能工作一次

img.onclick = function() {
    // other code
    img.onclick=null;
}

范例1。

或者也許你想要這個作為按鈕

var makeChart = function() {
    // other code
    document.getElementById('createChart').onclick=null;
}

例2

一次附加動態div和JSFiddle問題

問題描述

1 個解決方案

解決方案1
1 2013-01-05 02:35:10

我有辦法只將元素追加一次嗎？

一次附加動態div和JSFiddle問題

問題描述

1 個解決方案

解決方案1 1 2013-01-05 02:35:10

我有辦法只將元素追加一次嗎？

解決方案1
1 2013-01-05 02:35:10