0

Hi I was trying to demonstrate a problem with an example in fiddle, however I am stuck in the first step. In the fiddle that follows I am trying to dynamically create a table with td containing buttons and on click of that button I want to print the event.I dont see any error in the console. But the click event is never fired. Can someone please help me. I have another problem which I need to try out after this has been fixed.

HTML

<body>
  <div class="myElement" id="test">

  </div>
</body>

JS

var table = document.createElement('table');
for (var i = 1; i < 4; i++){
    var tr = document.createElement('tr');

    var td1 = document.createElement('td');

    var text1 = document.createTextNode('Text1');

    var btn = document.createElement("BUTTON");
    btn.className ="clickable";
    var t = document.createTextNode("CLICK ME");       
    btn.appendChild(t);  

    td1.appendChild(btn);
    td1.appendChild(text1);
    tr.appendChild(td1);
    table.appendChild(tr);  
}

$('.clickable').click(function(){
   alert('You clicked me');
    console.log("You clicked meg");
    });

  var tooltipSpan = document.createElement('span');
  tooltipSpan.appendChild(table);
  var innerHtml =  document.createElement("div"); 
  innerHtml.appendChild(tooltipSpan);
  $("#test").append(innerHtml);

https://jsfiddle.net/dzrn7rus/

deb
  • 631
  • 1
  • 5
  • 15
  • possible duplicate of [Event binding on dynamically created elements?](http://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements) – Teemu Mar 12 '15 at 19:01
  • Thank you for pointing me to the link. My fiddle works with on adding the event Listner. Now I will try to post the actual problem. – deb Mar 12 '15 at 19:10
  • This particular code would work if you'd move the event attaching code at the end of the snippet. – Teemu Mar 12 '15 at 19:15
  • I am trying to exhibit a problem where the function stops working when I use the jquery Smallipop plugin. I have tried to update the fiddle with jquery plugin but it isnt working.I have also included it as an external resource. Could you please help! – deb Mar 12 '15 at 19:45
  • Well, you should ask a new question. Looks like you've linked a resource to a web page, you've to find an online code source instead. – Teemu Mar 12 '15 at 19:54
  • Yes.I will do so. Right now I am trying to find a resource that serves those js and css files over https. – deb Mar 12 '15 at 20:07
  • I ran accross a few fiddles and all the resources that point to the js and css files seem to point to http:// links, however when I try to run it complains to work on https. how can I get around this problem? – deb Mar 12 '15 at 20:10
  • okay.I just forked one the fiddles that used smallipop and I am fine now. – deb Mar 12 '15 at 20:17

0 Answers0