jQuery在另一個on事件中插入元素

Question

首先在這里發布，並且在javascript / jquery / webstuff上還很新，但是即使在對我要做的事情進行了一些研究之后，我也沒有設法找到使該事情起作用的東西。

因此，這是上下文：
我正在使用HTML和Javascript / Jquery創建時間表。

我希望能夠通過單擊當天（這是<td> ）直接注入自動生成的<span>或其他內容。

最初，我使用了諸如“ getElementById（）”之類的基本東西，但是如果我設法做到這一點，我將進行大量重復的代碼。 而且我很確定我可以避免這種情況。

所以基本上我想做通用代碼並能夠獲得用戶點擊的代碼。

這是我現在設法完成的操作：HTML part：

<table>
    <tr>
        <th class="day-name">Sun</th>
        <th class="day-name">Mon</th>
        <th class="day-name">Tue</th>
        <th class="day-name">Wed</th>
        <th class="day-name">Thu</th>
        <th class="day-name">Fri</th>
        <th class="day-name">Sat</th>
    </tr>

    {% set counter = namespace(a=0) %}
    {% for x in range(0, 5) %}
        <tr class="week">
            {% for y in range(0, 7) %}
                {% set counter.a = counter.a + 1 %}
                <!-- <td id="2" class="day" onclick="addEvent()"><span class="number">{{ counter.a }}</span></td> -->
                <td id="day_{{ counter.a }}" class="day"><span class="number">{{ counter.a }}</span></td>
            {% endfor %}
    {% endfor %}
</table>

Javascript部分：

function addEvent(){
    var node = document.createElement("span");
    node.setAttribute("class", "event");
    document.getElementById("2").appendChild(node);
};

$(document).ready(function(){
    $("td").click(function(){
        alert("Ahahahah");
        var node = document.createElement("span");
        node.setAttribute("class", "event");
        document.getElementById(this).appendChild(node);
    });
});

{％...％}來自Flask / Jinja的東西，但是我很確定那不是問題。

該腳本在另一個文件中，但包含該文件。 （可以肯定，因為腳本“ addEvent”運行良好）。

因此，我嘗試了很多很多事情，但仍然無法正常工作。 警報彈出窗口甚至沒有顯示出來，因此我無法嘗試該腳本。 我猜想注入新元素的方法是錯誤的，但是我一直沒有找到想要的方法。

在這里，在此先感謝您抽出寶貴的時間來幫助我

Answer 1

我懂了

onclick="addingEvent()" 

但

function addEvent(){

馬貝這是問題嗎？

Answer 2

您需要使用this的引用，並使用this可以附加它。

 $(document).ready(function(){ $("td").click(function(){ alert("Ahahahah"); var node = document.createElement("span"); node.setAttribute("class", "event"); this.appendChild(node); }); });