Can you please tell me how can I set the test function for the keyup element inside the test() function;
What would be only the function call in document ready, and all other events in the function itself.
jQuery.fn.extend({
test: function() {
$(this).val("123");
}
$(this).test();
$(this).keyup(function() {
$(this).test();
});
});
$(document).ready(function() {
$("input").test();
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" value="456">
Related
It shows a message 'Hi' when I click on 'ShoW',
But when I click on the next option 'ShoW', it does not show a message.
$('.btn').on("click", function () {
alert('Hi');
$('.box .btn').remove();
$('.btn').clone().appendTo('.box');
return false;
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="btn">ShoW</div>
<div class="box"></div>
What code should I add for JS?
This is because the event handler you created is bound to objects that existed when it was created:
$('.btn').on("click", function () {
This will only work for .btn elements that were already available at the time this line of code ran - it is not evaluated by jQuery again.
Instead, use this format for binding the event, which will pick up dynamically created elements:
$(document).on('click', '.btn', function () {
Seen here in this working snippet:
$(document).on('click', '.btn', function () {
alert('Hi');
$('.box .btn').remove();
$('.btn').clone().appendTo('.box');
return false;
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="btn">ShoW</div>
<div class="box"></div>
You have to set event once more again after clone.
then, you can declare your event callback as a function, and set event again after cloning on the cloned element, like this:
function appendShowButton() {
alert('Hi');
$('.box .btn').remove();
var newEl = $('.btn').clone().appendTo('.box');
newEl.on('click', appendShowButton);
return false;
}
$('.btn').on("click", appendShowButton);
The scenario I want to achieve is as follow:
$("#parentDiv").on("load",'#childDiv', function () {
// do something...
});
I would like to call a function when a child div is dynamically generated and shown on the page, but there is no suitable event that can achieve this. Any hint or help would be appreciated.
Instead of load, you can make use of a custom event which gets triggered with .trigger():
$(document).ready(function() {
$("button").on("click", function() {
$("body").append("<div id='new'>Created</div>").trigger('custom-event');
});
});
$(document).on("custom-event", function() {
console.log('DIV created!');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<button>Create element</button>
</body>
I'm trying to run a function whenever an input's text changes. I'm using the oninput attribute to do that. I followed W3Schools tutorial. When I try it on in my own code, (or JSFiddle,) the function doesn't get called.
JSFiddle
$(document).ready(function () {
function myFunction() {
alert("asdf");
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="myInput" oninput="myFunction()">
Because oninput calling a method myFunction that is out of scope. There is no reason for it to be inside the ready handler
//$(document).ready(function () { <--get rid of this
function myFunction() {
alert("asdf");
}
//}); <-- get rid of this
Now it will work
I am trying to do something like Hijack the jQuery events of some elements, do a judgement, and then trigger the default handler if necessary.
Say I have a page with some inputs and buttons, and each of them are already bind with event handlers(click, focu key events, etc.) to do their jobs.
What I want to achieve is: whenever these elements' events are fired, I'd like to trigger my function first, this function will gather some data, and judge whether the execution should continue.
If no the corresponding handler should not be called like nothing happened.
If yes the original handler should be triggered with the original event data.
I don't want to change the default handlers to achieve this, so, is there a good way to do something like this?
Thanks
You could use the internal method _data()
/* add some event handlers */
$("button").on("click", function() {
console.log("Button clicked");
});
$("button").on("click", function() {
console.log("Button clicked 2");
});
/* hijack them */
var button = $("button"),
boundEvents = $._data(button.get(0)).events;
$.each(boundEvents, function(key, eventHandlers) {
// save the handlers from being "destroyed" by .off()
eventHandlers = eventHandlers.map(function(eh) {
return eh.handler;
});
// remove the event handlers
button.off(key);
// add the hijacked version
$.each(eventHandlers, function(idx, handler) {
button.on(key, function(e) {
if ($("#cb").prop("checked")) {
handler(e);
} else {
console.log("nothing to do...");
}
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="checkbox" id="cb" />
<br />
<button>Click me</button>
Try defining function at .data() of each that has events attached which is called at if condition within handler. If function returns true , do stuff , if function returns false do not do stuff
$("div").on("click", function() {
// if `check` returns `true`, do stuff
if ($(this).data().check()) {
console.log(this.tagName)
}
});
$("input").on("focus", function() {
// if `check` returns `true`, do stuff
if ($(this).data().check()) {
console.log(this.tagName)
}
});
var elems = $("*").filter(function(i,el) {
return $._data(el).events !== undefined
})
elems.each(function(i, el) {
$(el).data().check = function() {
// define condition here
// if element has `css` `color` property set to `"blue"`
// return `true`, else return `false`
if ($(el).css("color") === "rgb(0, 0, 255)") return true
else return false
}
});
div {
color:blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<div>click</div>
<input type="text" />
<span>text</span>
On checking a checkbox, I need to call a function. The first time I check the checkbox the function is not called whereas if I check it again, the function is successfully called. Please help me solve this issue. Here I have showed the part of my HTML and the function.
<input type="checkbox" id="checkThen" onchange="LoadContactDetails()">
function LoadContactDetails() {
$("#checkThen").change(function () {
if ($(this).is(":checked")) {
// ..........
}
else {
// ..........
}
});
}
If you want to attach inline event handler use ,
<input type="checkbox" id="checkThen" onchange="LoadContactDetails(this)" />
function LoadContactDetails(element) {
alert(element.checked);
}
DEMO
OR
If you want to use jQuery event handler use,
<input type="checkbox" id="checkThen" />
$(function() {
$("#checkThen").change(function () {
if (this.checked) {
// checked
}
else {
// unchecked
}
});
});
DEMO
You just bind the change event first time you clicked.
Remove the onchange attribute, then just bind the change event at the dom ready callback.
html:
<input type="checkbox" id="checkThen">
js:
$(function() {
$("#checkThen").change(function () {
if ($(this).is(":checked")) {
..........
}
else {
..........
}
});
});
$(document).ready(function(){
$("#checkThen").change(function () {
if ($(this).is(":checked")) {
..........
}
else {
..........
}
});
});
Remove the onchange attribute in function LoadContactDetails().
html:
<input type="checkbox" id="checkThen" onchange="LoadContactDetails()">
js:
function LoadContactDetails() {
if ($('#checkThen').is(":checked")) {
alert('checked');
}
else {
alert('Not-checked');
}
}
Demo
**Or**
You just bind the change event first time you clicked.
Remove the onchange attribute, then just bind the change event at the dom ready callback.
Html:
<input type="checkbox" id="checkThen">
.js:
$(function() {
$("#checkThen").change(function () {
if ($(this).is(":checked")) {
alert('checked');
}
else {
alert('Not checked');
}
});
});
Demo
Hope it should helpful for you.
In the first click you are binding an event to the checkbox. And from 2nd click onwards the callback function gets fired, and a new event binding will also happen. You can make it work by simply changing the code as follows,
HTML
<input type="checkbox" id="checkThen" >
Javascript
$(document).ready(function(){
$("#checkThen").change(function () {
if (this.checked) {
// checked
}
else {
// unchecked
}
});
});
Please follow this article on getting an idea about callback functions
Try using "Click" instead of "change. It might work.
Here you bind change event every time when function LoadContactDetails() call.
(It's not correct way)
You can just call your code directly inside your function.
function LoadContactDetails() {
if ($('#checkThen').is(":checked")) {
alert('checked');
} else {
alert('Not-checked');
}
}
Working Fiddle
i tried all the solutions given here but it did not work for me Finally, I found an easy way to solve this problem.I hope this will helpful for you also.
function LoadContactDetails() {
$("#checkThen").change(function () {
if ($(this).is(":checked")) {
alert('hello')
}
else {
alert('something wronge')
}
});
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<input type="checkbox" id="checkThen" onMouseDown="LoadContactDetails()"/>