CODEWITHSUNDEEP
javascriptaddeventlistener
Jason
Jason

Reputation: 403

JavaScript event in class on dynamically created element

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

  1. 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...

  2. 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

Upvotes: 2

Views: 98

Answers (1)

SystemGlitch
SystemGlitch

Reputation: 2262

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>

Upvotes: 1

Related Questions