Resize function to replace divs disables onclick function

Question

I know the title is shit, but I don't know what will be better.

The case is, I create few spans with divs inside on absolute coordinate, according to $(window).width(). When I resize it, I want to rearrange them, so on $(window).resize() I call function to delete the spans, $("span").empty(); and do exactly the same thing, as when I created then. Further more there is a click function, that works fine with the first created spans, and then when I clear then and create exactly the same thing after resize, it doens't work.

Please look at the simplified jsfiddle to understand. First try to click object. Then resize the window and try to click on it.

http://jsfiddle.net/4159v04o/1/

Any ideas why that occurs? Thank you in advance!

maybe this helps http://stackoverflow.com/questions/15090942/jquery-event-handler-not-working-on-dynamic-content — seyfe, Jul 23 '15 at 10:57

score 1 · Accepted Answer · answered Jul 23 '15 at 10:56

1

It's due to divs being created/erased dynamically. What you need is event delegation.

Event delegation allows us to attach a single event listener, to a parent element, that will fire for all descendants matching a selector, whether those descendants exist now or are added in the future.

Replace:

$('div').on({click: function() {

With:

$(document).on("click", "div", function() {

Updated fiddle

answered Jul 23 '15 at 10:56

lshettyl

8,166
4
25
31

Thanks! Simple and elegant. – user4065758 Jul 23 '15 at 10:58

score 1 · Answer 2 · answered Jul 23 '15 at 11:09

I have debug the code link and changed the code. there were some code related to name.*. but in name there is only string and you are using style method which is not supporting.

So I removed all the name.* line now it is working fine

var secondstack = [];
var positionTop = 20;
var positionLeft = 20;

document.body.style.background = '#00CCFF';
document.body.style.backgroundSize = "cover";

for(var i = 0; i < 25; i++){
    var span = document.createElement("span");
    span.style.position = "absolute";   
    span.style.left = positionLeft + "px";
    span.style.top = positionTop + "px";
    var div = document.createElement("div");
    div.style.width = '105px';
    div.style.height = '100px';
    div.id = i;
    div.style.background = '#00FFCC';
    $(div).css({backgroundSize: "cover"});  
    if((positionLeft + 250) < $(window).width()) positionLeft += 120;
    else {
        old_Width = positionLeft;
        var positionTop = 160 + positionTop;
        var positionLeft = 20;      
    }
    span.appendChild(div);
    document.body.appendChild(span);
}
DivClick();
var resizeTimer;
$(window).resize(function () {
    clearTimeout(resizeTimer);
    resizeTimer = setTimeout(doSomething, 100);
    DivClick()
});

function rearrange(){
    $("div").empty();
    $("span").empty();
    secondstack = [];
    var positionTop = 20;
    var positionLeft = 20;
    for(var i = 0; i < 25; i++){
        var span = document.createElement("span");
        span.style.position = "absolute";   
        span.style.left = positionLeft + "px";
        span.style.top = positionTop + "px";
        var div = document.createElement("div");
        div.style.width = '105px';
        div.style.height = '100px';
        div.id = i;
        div.style.background = '#00FFCC';
        $(div).css({backgroundSize: "cover"});  
        if((positionLeft + 250) < $(window).width()) positionLeft += 120;
        else {
            var positionTop = 160 + positionTop;
            var positionLeft = 20;      
        }
        span.appendChild(div);
        document.body.appendChild(span);
    }
}

function DivClick()
{
$('div').on({click: function(){

    var el = document.getElementById(this.id);
    el.style.border = "3px solid white";

    if(!(secondstack.indexOf(this.id) > -1))    secondstack.push(this.id);
    else {
        var index = secondstack.indexOf(this.id);
        el.style.border = "3px solid black";

        secondstack.splice(index, 1);
    }

}});
}

Just paste and run on same Jsfiddel Example

Hey. Thanks for debugging, the name is there, because I forgot to remove it by pasting the code in jsfiddle. I didn't want to paste the whole thing so I cut it to the very essentials to solve only the described issue. Everything else is good in the working code. Thanks anyway! — user4065758, Jul 23 '15 at 11:13
It is another solution. The previous answer did it for my code. Of course you will get an up-vote! — user4065758, Jul 23 '15 at 11:21

Resize function to replace divs disables onclick function

2 Answers2