Call class function and access class property in jQuery method
I had problem in my other code and huge, but I had made one prototype here,
this code is suppose to alert "hello John" instead of "hello undefined"
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" language="javascript">
function callMethod(data, callback) {
return callback(data);
}
function client(divid) {
this.init = function () {
$(this.divid).click((function (context) {
return fun开发者_开发知识库ction () {
callMethod("hello ", context.method);
}
})(this));
}
this.divid = "#" + divid;
this.myname = "John";
this.method = function (d) {
alert(d + this.myname);
}
this.init();
}
$('document').ready(function () {
new client("mydiv");
});
</script>
</head>
<body>
<div id="mydiv">This is my div</div>
</body>
</html>
can some body point out me why I'm getting unexpected result here?
I'm getting unexpected result on
this.method = function (d) {
alert(d + this.myname);
}
this.myname suppose to return "John" here.
How to access class instance in event hanlder (JavaScript)? I'm getting help from above link, but I'm not being able to solve
This worked:
function callMethod(data, callback) {
return callback(data);
}
function client(divid) {
this.init = function() {
$(this.divid).click((function(context) {
return function() {
callMethod("hello ", context.method);
}
})(this));
}
this.divid = "#" + divid;
this.myname = "John";
this.method = function(d) {
alert(d + this.myname);
}
this.init();
}
$('document').ready(function() {
client("mydiv");
});
Update:
You have to return the function object if you want to create different instances of it:
function callMethod(data, callback) {
return callback(data);
}
function client(divid) {
this.init = function() {
$(this.divid).click((function(context) {
return function() {
callMethod("hello ", context.method);
}
})(this));
}
this.divid = "#" + divid;
this.myname = "John";
this.method = function(d) {
alert(d + this.myname);
}
this.init();
return this;
}
$('document').ready(function() {
var x = client("mydiv");
alert(x.divid);
alert(x.myname);
});
I got solved here is code
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" language="javascript">
function callMethod(data, callback) {
return callback(data);
}
function client(divid) {
this.init = function () {
$(this.divid).click(function () {
callMethod("hello ", c.method);
});
}
this.divid = "#" + divid;
this.myname = "John";
this.method = function (d) {
alert(d + c.myname + $(c.divid).html());
}
this.init();
var c = this;
}
$('document').ready(function () {
new client("mydiv");
new client("nextdiv");
});
</script>
</head>
<body>
<div id="mydiv">This is my div</div>
<br />
<div id="nextdiv">Next Div</div>
</body>
</html>
actually this small line of code
var c = this;
is playing role. cheers up ;) , we don't need to event take care of "context" also
and we can make multiple instance too. test case:
$('document').ready(function () {
var x = new client("mydiv");
var y = new client("nextdiv");
alert("id of x is : " + x.divid + "\n id or y is : " + y.divid);
});
This is an alternative way of coding which I find easier to understand/maintain.
Whatever is available to the public after object init can be seen more easily in the return section. I've left the greet function as public and customisable.
function client(divid) {
var ids = divid;
var target = $('#' + ids);
var content = target.html();
var myname = "John";
function getID() {
return ids;
}
function greet(d) {
var d = d || '';
alert('Hello ' + d + myname + ', ' + content);
}
target.click(function() {
customName(d);
})
return {
getID: getID,
greet: greet
}
}
$(function() {
var x = new client('mydiv');
var y = new client('nextdiv');
//alert("id of x is : " + x.getID() + " and y is : " + y.getID());
//x.greet('E ');
x.greet();
});
加载中,请稍侯......
精彩评论