This question already has answers here:
jQuery equivalent of JavaScript's addEventListener method
(7 answers)
Closed 8 years ago.
I have the below code where I successfully disable the properties
.prop("onclick", null)
.prop("onmouseover", null)
.prop("onmouseout", null);
Now if I want to rebind the click event what should I do.
For adding events back to a element use the bind function.
$("YourElement").bind("event",function(){
//Do what you want.
}
You can do it with many ways. I don't use to call the prop() method, but I think you just have to use it and set as your second parameter the name of your function.
function yourFunction()
{
// The job with onclick
}
DOMElement.prop("onclick", "yourFunction");
You can also use anonymous functions.
Use this documentation to work : http://api.jquery.com/prop/
I suggest you should use removeProp() instead of prop("yourprop", null) !
Related
This question already has answers here:
addEventListener, arrow functions, and `this` [duplicate]
(1 answer)
What does "this" refer to in arrow functions in ES6?
(10 answers)
Closed last year.
So I'm dealing with a little problem..
I'm trying to modify drag-and-drop code and came across a problem, since I want to have multiple drop areas and one function for all of them.
I have this code:
dropArea.addEventListener("dragover", (event)=>{
event.preventDefault(); //preventing from default behaviour
dropArea.classList.add("activated");
dragText.textContent = "🖐 Release to Upload File";
});
And specified dropareawitth querySelector:
const dropArea = document.querySelector(".drag-area")
Now I need to modify it to work with multiple drop zones. I thought to just replace the "droparea" inside the event to "this" something like that:
this.classList.add("activated");
but it does not work. I even tried:
$(this).classList.add("activated");
Returns this error:
Uncaught TypeError: Cannot read properties of undefined (reading 'add')
Any solutions? I'm stuck...
As your event handler is an arrow function, the value of this is not influenced by the caller, so you cannot use it to get the DOM element. You can use event.target.
event.target.classList.add("activated");
As to your final attempt: $() does not return a DOM element, but an array-like "jQuery" collection object, which doesn't have such properties as classList.
This question already has answers here:
Why Firefox says that window.event is undefined? (call function with added event listener)
(6 answers)
Closed 1 year ago.
Cuz if I skip it, the output is the same. Why we need it?
<p id='p'>TEXT</p>
<script>
p.onclick=function(event){ //with parameter
alert(event.target.tagName); //P
}
</script>
Now skip event, same output.
<p id='p'>TEXT</p>
<script>
p.onclick=function(){ //without parameter
alert(event.target.tagName); //P
}
</script>
Many tutorial will keep the parameter, I wonder why we need it? Why don't we make it simple? I just keep the original name of event in the function and it works out.
Because window.event is deprecated and is not supported by all browsers.
You should avoid using this property in new code, and should instead use the Event passed into the event handler function. This property is not universally supported and even when supported introduces potential fragility to your code.
This question already has answers here:
Javascript event handler with parameters
(9 answers)
Closed 7 years ago.
I need to send parameters to the on change event of a dropdown which is generated on runtime. How can i accomplish such thing like:
$(options.host_element).find('select').on('change',(graph_widget.draw_graph).bind(options));
options is the parameter i want to send to the function draw_graph, the function is linked but not the parameters
Not sure of your function's signature, but you can pass parameters to the function itself just like you do to any normal function, so it would look something like this:
$(options.host_element).find('select').on('change',function(){
graph_widget.draw_graph(options);
});
Bind is used to change the value of this that will be used in the function, not quite what you're looking for.
I made a small fiddle to demonstrate:
Fiddle
jQuery.on has an optional parameter called data:
$(options.host_element).find('select').on('change', options, graph_widget.draw_graph);
Later in your event handler, you may access data using e.data:
function draw_graph(e) {
var options = e.data;
}
This question already has answers here:
Javascript dynamically invoke object method from string
(5 answers)
Closed 8 years ago.
I want to use a method in which i will pass a function_name as parameter to another function.
On the other function, the parameter will be treated as a function
here's my code example
<div class="btn_crt_acct" onclick="toggle_object('register_div','slideDown');">
CREATE AN ACCOUNT
</div>
whch will call a function like this
function toggle_object(obj,fun)
{
$('#'+obj).fun('slow');
// fun => slideDown
// so $('#'+obj).fun('slow'); => $('#'+obj).slideDown('slow');
}
but i am doing something wrong as it states an error in console, $fun(..) is not a function.
How can i make it work perfectly??
Thanks
You'd do that with bracket notation
$('#'+obj)[fun]('slow');
FIDDLE
But why not use a proper event handler, and slideToggle if you intend to toggle it
$('.btn_crt_acct').on('click', function() {
$('#register_div').slideToggle();
});
This question already has answers here:
Override jQuery functions
(2 answers)
Closed 9 years ago.
Is it possible add some function to jquery functions like hide() or show()? The objective is always that I use the function hide(), it will execute jquery base and my own function.
If yes, can you show me how? Thanks.
You could override the function. Check Override jQuery functions for a more detailed answer.
Edit:
jQuery.fn.show = function() {
// Your custom code
}
But I wouldn't override jQuery's methods when you could create your own. Overriding would very likely cause unexpected behavior in plugins.