How can I pass an argument into a function with a handler?
Question
This is my new code...
<html>
<div class='header'>
<a href='ks3-science.php' id='science'>KS3 Science</a>
</div>;
</html>
<script>
varhandlers = {
getHandler: function (str) {
return this[str];
},
'#science': function () {
$.get('load-topic.php', {
topic: "Animal and Plant Cells"
});
},
};
$('#science').on('click', handlers.getHandler('#science'));
</script>
My old code was this...
<html>
<div class='header'>
<a href='ks3-science.php' id='science'>KS3 Science</a>
</div>;
</html>
<script>
$('#science').on('click', function () {
$.get('load-topic.php', {
topic: "Animal and Plant Cells"
});
);
</script>
I'm just not sure how a handler works so I don't know how to pass an argument to the function with a handler.
3 answers
solution1
0 2020-06-25 02:29:15
You can attach you argument to specific html with data attribute, and retrieve the data when an element is clicked in the click handler.
let display = $('#display'); $('.demo').click(function(){ let data = $(this).data('name'); display.html(data); })
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="display"> Click the follwing </div> <ul> <li class="demo" data-name="data1"> data 1 </li> <li class="demo" data-name="data2"> data 2 </li> </ul>
In order to use your handler you need to wrap your handler function inside a callback as follow.
$('#science').on('click', function() {
var id = $(this).attr('id'); // assume the argument you want to pass is id
handlers.getHandler(id);
});
solution2
0 2020-06-25 02:30:01
var handlers = {
getHandler: function (str) {
return this[str]('what ever argument you want');
},
'#science': function (argument) {
$.get('load-topic.php', {topic: "Animal and Plant Cells"});
},
};
$('#science').on('click',()=>{ handlers.getHandler('#science')});
solution3
0 2020-06-25 02:33:41
You can't call functions passed into event handlers like you would call normal functions. So you can't, for instance, do this:
const myFunc = (myArg) => {
console.log(myArg);
}
$('#science').on('click', myFunc);
myFunc("Testing...");
and expect it to print out Testing... when the event fires. Instead, you'll get something totally different. And that's because there are default parameters that these functions take - such as an event parameter.
If you want to call a function with a custom argument from inside of an event handler, you should do so inside of the callback function. Here's an example:
const myFunc = (myArg) => {
console.log(myArg);
}
$('#science').on('click', function() {
myFunc("Testing...");
});
Now, when the user clicks on the element, the console.log will print out Testing... as expected.
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.