Jquery Insert element in an other on event
Clash Royale CLAN TAG#URR8PPP
Jquery Insert element in an other on event
First post here and quite new on javascript/jquery/webstuff but even after some research about the thing I'm trying to do, I didn't manage to find something that made this thing work.
So, here is the context :
I'm creating a schedule with HTML and Javascript/Jquery.
I want to be able to inject an automated generated <span>
or something directly by clicking on the day (which is a <td>
).
<span>
<td>
At first I used basic stuff like "getElementById()" but if I manage to do the thing with this, I'm going on a lot of repetitive code. And I'm quite sure I can avoid this.
So basically I wanted to do generic code and be able to get the which the user clicked.
Here is what I managed to do by now:
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 Part :
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);
);
);
The % ... % is from Flask/Jinja stuff, but I'm quite sure that's not the problem.
The script is in an other file, but the file is included. (Sure about it because the script "addEvent" works well).
So I tried many, many things, but still not working. The alert pop-up is not even showing up, so I can't try the script. I guess that the way to inject the new element is wrong, but I didn't saw anything with the way I was looking for.
So here it is, thanks in advance for those who take the time to help me on this
When I was looking for a way to do what I want, I was mostly redirect on jQuery ways. So I basically think that javascript was not really fit for that kind of duty
– Soft-Soffa
Aug 10 at 12:35
You're binding the onclick twice. Once using native javascript, and the other time using Jquery. I guess you want the jquery onclick to work. If that's the case, are you sure you're including the jquery js file in your application?
– bastos.sergio
Aug 10 at 12:41
I've just seen that I did a mistake while formatting the question. Actually there is no onclick native java on the element. (I had to show it since I have 2 function in the script.) The script is loaded on the page, I'm 100% sure of it because I can use the addEvent on an element if I want to, but the other function is ignored
– Soft-Soffa
Aug 10 at 12:46
jquery is just javascript under the bonnet - it is for lazy programmers as it makes things easier. If you know how to do it with native js, then stick to it as it will be more efficient and you won't need to include a massive library
– Pete
Aug 10 at 12:55
2 Answers
2
I see
onclick="addingEvent()"
but
function addEvent(){
Mabay this is the problem?
Hi, thanks for answering but I just did a mistake while formatting the code for the question. Actually it's no big deal (I've edited the question), and it wasn't causing any problem :/
– Soft-Soffa
Aug 10 at 12:43
You need to use the reference to this
and using this
can append with it.
this
this
$(document).ready(function()
$("td").click(function()
alert("Ahahahah");
var node = document.createElement("span");
node.setAttribute("class", "event");
this.appendChild(node);
);
);
By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.
why the need to do it twice in 2 different ways - if you are using native js, why not just stick to that if it works, why bind a jquery event that does the same thing?
– Pete
Aug 10 at 11:51