Home > Developer > JavaScript
The basic code is as follows:
Copy codeThe Code is as follows:
<Html xmlns = "http://www.w3.org/1999/xhtml">
<Head> <title>
</Title>
<Script src = "jquery-1.4.4.min.js" type = "text/javascript"> </script>
<Script type = "text/javascript">
Var text = "test ";
Var t = new functionTest (text );
Function functionTest (text)
{
Var alertText = text
$ ("# BtnSave"). click (function (e ){
AlertTestInnert ();
});
This. AlertTest = function ()
{
Alert (alertText );
}
Function alertTestInnert ()
{
Alert (alertText );
}
}
Function alertTestOuter ()
{
Alert (text );
}
</Script>
<Body>
<Input type = "button" id = "btnSave" class = "button" value = "save"/>
<Input type = "button" id = "btnCancel" class = "button" value = "cancel" onclick = "javascript: t. AlertTest;"/>
</Body>
</Html>
Click "save" to cancel the operation. The first code is as follows:
Clicking save does not respond at all. It is strange that this most common jquery binding event does not work. Later, I realized that I forgot to bind it to $ (document). ready (function;
Modify js as follows:
Copy codeThe Code is as follows:
Var text = "test ";
$ (Document). ready (function (){
Var t = new functionTest (text );
});
Function functionTest (text)
{
Var alertText = text
$ ("# BtnSave"). click (function (e ){
AlertTestInnert ();
});
This. AlertTest = function ()
{
Alert (alertText );
}
Function alertTestInnert ()
{
Alert (alertText );
}
}
Function alertTestOuter ()
{
Alert (text );
}
After modification, click "save" and pass the parameters correctly. This ensures that different parameters are passed at different points.
However, some tags are dynamically generated on the page, and the click events of these tags need to be processed. Take the cancel button again as an example. Because it is generated dynamically, you cannot use the same method as to save it.
Only onclick = "javascript: t. AlertTest;" can be used for similar binding. The test is as follows:
Modify
Copy codeThe Code is as follows:
<Input type = "button" id = "btnCancel" class = "button" value = "cancel" onclick = "javascript: t. AlertTest;"/>
Click "no response" and modify it as follows:
Copy codeThe Code is as follows:
<Input type = "button" id = "btnCancel" class = "button" value = "cancel" onclick = "javascript: alertTestOuter;"/>
The click still does not respond, and there is no error. The modification is as follows:
Copy codeThe Code is as follows:
<Input type = "button" id = "btnCancel" class = "button" value = "cancel" onclick = "javascript: alertTestOuter ();"/>
This time, we responded, but it seems that we have missing a pair of parentheses. The method to change to encapsulation is as follows:
Copy codeThe Code is as follows:
<Input type = "button" id = "btnCancel" class = "button" value = "cancel" onclick = "javascript: t. AlertTest ();"/>
Click the button and the system prompts "Uncaught ReferenceError: t is not defined ".
It seems that the variable t is not defined and the scope takes effect. So modify js as follows, that is, put the variable t outside, and assign values inside, as shown below:
Copy codeThe Code is as follows:
Var t;
Var text = "test ";
$ (Document). ready (function (){
T = new functionTest (text );
});
Function functionTest (text)
{
Var alertText = text
$ ("# BtnSave"). click (function (e ){
AlertTestInnert ();
});
This. AlertTest = function ()
{
Alert (alertText );
}
Function alertTestInnert ()
{
Alert (alertText );
}
}
Function alertTestOuter ()
{
Alert (text );
}
In the last step, how do I pass parameters to the method that cancels the call?
The first step is to modify js as follows, that is, to change the function to be canceled to the method that requires passing parameters. The Code is as follows:
Copy codeThe Code is as follows:
Var t;
Var text = "test ";
$ (Document). ready (function (){
T = new functionTest (text );
});
Function functionTest (text)
{
Var alertText = text
$ ("# BtnSave"). click (function (e ){
AlertTestInnert ();
});
This. AlertTest = function (text)
{
Alert (text );
}
Function alertTestInnert ()
{
Alert (alertText );
}
}
Function alertTestOuter ()
{
Alert (text );
}
The corresponding html modification is as follows:
Copy codeThe Code is as follows:
<Input type = "button" id = "btnCancel" class = "button" value = "cancel" onclick = "javascript: t. AlertTest ('20140901');"/>
Click to see if the parameter is correctly passed. Everything is normal. It seems that this is done.
Finally, sort out the js Code:
Put the common js Code in a js file, and put it in common. js. Put different codes in htm. All the modified codes are as follows:
Copy codeThe Code is as follows:
<Html xmlns = "http://www.w3.org/1999/xhtml">
<Head> <title>
</Title>
<Script src = "jquery-1.4.4.min.js" type = "text/javascript"> </script>
<Script src = "common. js" type = "text/javascript"> </script>
<Script type = "text/javascript">
Var t; // outside the field to be defined; otherwise, the variable t cannot be accessed when you click Cancel.
Var text = "test"; // The passed Parameter
$ (Document). ready (function (){
T = new functionTest (text); // assign a value to t. The definition cannot be placed here.
});
</Script>
<Body>
<Input type = "button" id = "btnSave" class = "button" value = "save"/>
<Input type = "button" id = "btnCancel" class = "button" value = "cancel" onclick = "javascript: t. AlertTest ('20140901');"/>
</Body>
</Html>
Code for common. js:
Copy codeThe Code is as follows:
Function functionTest (text)
{
Var alertText = text
$ ("# BtnSave"). click (function (e ){
AlertTestInnert ();
});
This. AlertTest = function (text)
{
Alert (text );
}
Function alertTestInnert ()
{
Alert (alertText );
}
}
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
