Button click doesnt fire when used with smallipop jquery plugin

Question

I have an application in which I display a table(basically used to display errors) inside a popup, one of the tds have a button which is used to suppress this error. My problem is when used in conjuction with the smallipop plugin the click event is not getting fired , however it is running when run without the smallipop plugin. I have no clue whats going on here. I have fiddles for both the scenarios below:

HTML

<body>
    <label>testing with smalipop</label>    
  <div class="myElement" id="test" style="width:100px;height:200px;background:blue">

  </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);  
    btn.addEventListener( 'click', function ( e ) {
        console.log('you clicked me');
     }, false );

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

  var tooltipSpan = document.createElement('span');
  tooltipSpan.className = "smallipop-hint";
  tooltipSpan.appendChild(table);
  $("#test").append(tooltipSpan);
$('.myElement').smallipop();

Fiddle with smallipop

http://jsfiddle.net/fdu9vtv0/8/

Fiddle without smallipop

https://jsfiddle.net/dzrn7rus/12/

score 0 · Answer 1 · answered Mar 12 '15 at 21:49

There might be a problem with interfering JavaScript. Sometimes plugins override click events and especially because smallipop has special options for the behaviour of clicks inside the tooltip (see for example hideOnTriggerClick), this might be the problem.

I found out that when binding with jQuery, the listener still works:

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);  
    $(btn).on( "click", function() {
        alert('You clicked me');
        console.log('you clicked me');
    });
    td1.appendChild(btn);
    td1.appendChild(text1);
    tr.appendChild(td1);
    table.appendChild(tr);  
}
var tooltipSpan = document.createElement('span');
tooltipSpan.className = "smallipop-hint";
tooltipSpan.appendChild(table);
$("#test").append(tooltipSpan);
$('.myElement').smallipop();

This works as expected. See corresponding jsFiddle.

As to why it doesn't work with JavaScript: I have no clue. You might look into the source code of smallipop (although this seems to be offline at the moment). Probably there are some methods that smallipop uses that override the click events of its content.

Thank you for your answer. But the fiddle does'nt work properly. The click event works only once. I will take a look at the smallipop code though I am very new to jquery. — deb, Mar 13 '15 at 05:25
@deb: That's because everytime you change the DOM in the loop. And you only have a reference to the object `btn`. So all listeners will be added at the last iteration to `btn`, which are all three buttons. This is known as [**Javascript's infamous loop issue**](http://stackoverflow.com/questions/1451009/javascript-infamous-loop-issue) and also see [**this question**](http://stackoverflow.com/questions/750486/javascript-closure-inside-loops-simple-practical-example). If you apply their answers it should work alright. — Jean-Paul, Mar 13 '15 at 08:33
Hi Jean, I tried the old code with all the recommendations given in the links you have posted, then I removed the loop and the problem seems to be somewhere else. Here, is the updated fiddle with just one btn in the popover span http://jsfiddle.net/qdxjy390/10/ — deb, Mar 13 '15 at 18:07

Button click doesnt fire when used with smallipop jquery plugin

1 Answers1