我有一个 div 元素，它在单击单选按钮后加载。
需要在加载后隐藏部分div。
$(function($) {
$('.div_element').on('load', function() {
$('.textbox').hide();
});
});
上面的代码不起作用。我需要在 div 显示在页面上后触发一个函数。
最佳答案
下面是我将如何处理它。这是使用 vanilla JavaScript，但它可以很容易地适应使用 jQuery。
想法是使用Mutation Observers .希望对您有所帮助。
<!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);
// Uncomment this to stop observing at at the right place.
// observer.disconnect();
} ();
</script>
</body>
</html>
关于javascript - div加载完成后调用js函数，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50960978/