JavaScript event in class on dynamically created element

Question

I have the below class, but have run into two problems:

I can only get it to work on existing elements, but I need to declare it for elements that later will be created dynamically. I believe a check on the eventlistener is needed, and perhaps using MutationObserver... and now I'm so far out of my depth...
If I do create two instances of the bar, for two elements that do exist, then when I mousedown or mouseup, they seem to target the same element. I believe this is because I'm using a prototype, and not this. But I can not get it to work if I use this.mousedown=func... instead.

var bar = (function(){
  var me = this;
  function bar(id){
    me._id=id;
  }
  
  bar.prototype.mousedown=function(code){
    el().addEventListener('mousedown', code, false);
    return this;
  }
  
  bar.prototype.mouseup=function(code){
    el().addEventListener('mouseup', code, false);
    return this;
  }
  
  this.el=function(){
    return document.getElementById(me._id);
  };
  this.css=function(){
    return el().style;
  };
  
  return bar;
})();

which I then use like this, for an existing element, in my jsfiddle a DIV with id batman.

Don't pay too much attention to the css() function and color changes, those are just for testing. The final code will hopefully have some ajax calls etc inside them instead.

function foo(s){
  return new bar(s);
}

foo("batman")
  .mousedown(
    function(e){
      css().background="green";
    }
  )
  .mouseup(
    function(e){
      css().background="orange";
    }
  );

full jsbin code with sample

SystemGlitch · Accepted Answer · 2018-10-30 16:04:25Z

1

var me = this;: Here, this refers to the window variable because you're not inside an object. So when you create another instance of bar (the function declared line 3), me._id=id; overrides the previous id because this reference didn't change.

Use a more object-oriented approach.

var bar = function(id){
  this.id=id;
}

bar.prototype.element=function(){
    return document.getElementById(this.id);
}

bar.prototype.css=function(){
    return this.element().style;
}

bar.prototype.mousedown=function(code){
    var that = this;
    this.element().addEventListener('mousedown', function(e){
      code(that);
    }, false);
    return this;
}
  
bar.prototype.mouseup=function(code){
  var that = this;
  this.element().addEventListener('mouseup', function(e){
      code(that);
  }, false);
  return this;
}

function foo(s){
  return new bar(s);
}

foo("batman")
  .mousedown(
    function(obj){
      obj.css().background="green";
    }
  )
  .mouseup(
    function(obj){
      obj.css().background="orange";
    }
  );

foo("batman2")
  .mousedown(
    function(obj){
      obj.css().background="green";
    }
  )
  .mouseup(
    function(obj){
      obj.css().background="orange";
    }
  );

.mydiv{
  background-color:#e72629;
  padding:5px;
  color:#ffffff;
  text-align:center;
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>

  
  
  <div class="mydiv" id="batman">
  hello world!
</div>
  
  <div class="mydiv" id="batman2">
  hello world 2!
</div>

  
</body>
</html>

edited Oct 30, 2018 at 16:04

answered Oct 30, 2018 at 15:56

SystemGlitch

2,29215 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

Jason Over a year ago

thank you so much, exactly what I needed and looks much better. What about a dynamically crated element, one that doesnt exist yet. Adding foo("batman3") now, without any html code spits out errors.

SystemGlitch Over a year ago

@Jason This code should work for dynamically created elements because it gets the element by id through document.getElementById().

Jason Over a year ago

check here, I renamed batman2 to batman3 in the JS code. There is no such element in the html, and it spits out errors in the console. jsbin link

SystemGlitch Over a year ago

@Jason Then just check if element() returns undefined.

Jason Over a year ago

thank you. I did that with my previous code and it just didnt work, but it works with the code you gave me so.. perfect. thank you!!!

|

Collectives™ on Stack Overflow

JavaScript event in class on dynamically created element

1 Answer 1

8 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Related