I am trying to create a JS framework.
Here is my JS code:
function $(id)
{
var info={
version:1.0
}
if(id)
{
if(window === this)
{
console.log('window id == '+id);
return new $(id);
}
console.log('id == '+id);
this.e = document.getElementById(id);
return this;
}
else{
return info;
}
}
$.prototype={
controller:function(pl)
{
if(typeof pl.events === 'function')
{
console.log('event is function');
}
},
click:function(callback)
{
this.e.addEventListener('click', callback, false);
return this;
}
};
Here I am calling this Framework
<div id='test'>
<div id='btn1'>Button1</div>
</div>
<div id='btn2'>Button2</div>
<script>
$('test').controller({
events:function()
{
$('btn1').click(function(){
alert('btn1 clicked');
});
}
});
$('btn2').click(function(){
alert('btn2 clicked');
});
</script>
OUTPUT
window id == test
id == test
event is function
window id == btn2
id == btn2
The problem is btn1 click event is not working but btn2 click is working. Can somone suggest some solution or some better way to make a JS frame work?
The problem is btn1 click event is not working
Well, you were not attaching a listener to it. You did pass a function to the controller
method which could have done this, but it was never called.
controller: function(pl) {
if (typeof pl.events === 'function') {
console.log('event is function'); // but do nothing?
// add this:
pl.events();
}
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.