admin管理员组文章数量:1289585
I have a div element which is loaded after a click on a radio button.
Need to hide a part of the div after it is loaded.
$(function($) {
$('.div_element').on('load', function() {
$('.textbox').hide();
});
});
The above code doesn't work. I need to trigger a function after the div is shown on the page.
I have a div element which is loaded after a click on a radio button.
Need to hide a part of the div after it is loaded.
$(function($) {
$('.div_element').on('load', function() {
$('.textbox').hide();
});
});
The above code doesn't work. I need to trigger a function after the div is shown on the page.
Share Improve this question edited Jun 21, 2018 at 5:35 phpblogger asked Jun 21, 2018 at 5:29 phpbloggerphpblogger 1011 gold badge1 silver badge7 bronze badges 6-
1
A
<div>doesn’t “load”. Do you want to call a function as soon as the<div>is in the DOM? Search for Mutation Observers. If the<div>isn’t in the DOM, then you can’t bind an event listener to it. – Sebastian Simon Commented Jun 21, 2018 at 5:31 - Can you add woking snippet of your code? That would be easy and faster to debug – Vikasdeep Singh Commented Jun 21, 2018 at 5:31
- @Xufox Yes, the div is shown on the page after radio button is clicked. I then need to say hide one of the textbox in the div that is loaded. – phpblogger Commented Jun 21, 2018 at 5:33
- @phpblogger what is your code to hide? – Kiran Shahi Commented Jun 21, 2018 at 5:34
- @KiranShahi Updated the question. The duplicate link has the first param as "some url" - I dont have anything to use on that place, is there any other possibility? – phpblogger Commented Jun 21, 2018 at 5:36
5 Answers
Reset to default 2Here is how I would go about it. This is using vanilla JavaScript but it can easily be adapted to use jQuery.
The idea is to use Mutation Observers. I hope it helps.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>DOM MUTATION OBSERVERS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<form name="radios">
<input type="radio" name="gender" value="male" id="maleRadio" checked> Male
<br>
<input type="radio" name="gender" value="female" id="femaleRadio"> Female
<br>
<input type="radio" name="gender" value="other" id="otherRadio"> Other
</form>
<!-- This div will be displayed when the radio button whose value is female is clicked. -->
<div id="femaleDiv" style="display: none">
<p>The textbox should be below...</p>
<input type="text" id="textToHide">
</div>
<script>
// After the document loads...
document.onload = function () {
// Attach an onclick listener to the radio buttons.
var radios = document.forms["radios"].elements["gender"];
for (var i = 0, max = radios.length; i < max; i++) {
radios[i].onclick = function (event) {
var radio = event.target || event.srcElement;
console.log(radio.name);
if (radio.value === "female") {
document.getElementById("female").style.display = "block"
}
}
}
// Get the div whose change in attributes we are interested in.
var targetNode = document.getElementById("femaleDiv");
// Set the mutation observer to only listen to attribute mutations
var config = { attributes: true };
// This will be called when a mutation has been observed
var callback = function(mutationsList) {
for (var mutation of mutationsList) {
if (mutation.type == "attributes") {
console.log(mutation);
console.log('The ' + mutation.attributeName + ' attribute was modified.');
if (targetNode.style.display == "block") {
document.getElementById("textToHide").style.display = "none";
}
}
}
};
// Create the observer
var observer = new MutationObserver(callback);
// Start observing
observer.observe(targetNode, config);
// Unment this to stop observing at at the right place.
// observer.disconnect();
} ();
</script>
</body>
</html>
Although it may not be good solution but you can check in an interval if the div exist, if it is then you can do further:
$(() => {
const checkDiv = setInterval(() => {
if($('.div_element').length > 0) { // it's better to use id instead of the class as selector
clearInterval(checkDiv);
// more action here
}
}, 100); // check after 100ms every time
});
Check Div is initialized
$(document).ready(function(){
var textBox="<input type='text' class='textbox'>";
$(".textboxContainer").html(textBox);
var divNew="<div class='div_element'>DIV to Load</div>";
$(".domNewDiv").html(divNew);
var divNew1="<div class='div_element'>DIV to Load 2</div>";
$(".domNewDiv").html(divNew1);
});
$(".div_element").init( function(){
$('.textboxContainer').find('.textbox').hide();
})<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='textboxContainer'></div>
<div class='domNewDiv'>
</div>As far as my understanding, you need to perform an action on clicking of a radio button. This is where your code should start.
$("input[name='YOUR_BUTOTN_NAME_GOES_HERE']").click(function(){
//I suggest to use a same class for both the radio buttons you want to click as this will effect for all the radio buttons
console.log('You clicked radio!');
var checkDivLength = setInterval(function(){
if($('.div_element').length > 0) {
//Hide your element
$('.textbox').hide();
clearInterval(checkDivLength);
}
}, 100);
});
Please note that in this line "$("input[name='YOUR_BUTOTN_NAME_GOES_HERE']").click(function(){" you need to give the name attribute which you have used in your code. Eg <input type="radio" name="sample" value="test"> then your code should be "$("input[name='sample']").click(function(){"
Thanks :)
You can invoke it using " () ", when the event calls:
$(function($) {
$('.div_element').on('load', function() {
$('.textbox').hide();
}());
});
本文标签： javascriptCall js function after div is loadedStack Overflow
版权声明：本文标题：javascript - Call js function after div is loaded - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1741478335a2381016.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论