div加载后调用js函数 [英] Call js function after div is loaded
本文介绍了div加载后调用js函数的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有一个div元素，单击一个单选按钮后就会加载它.
I have a div element which is loaded after a click on a radio button.
加载div后需要隐藏其一部分.
Need to hide a part of the div after it is loaded.
$(function($) {
$('.div_element').on('load', function() {
$('.textbox').hide();
});
});
上面的代码不起作用.页面上显示div后，我需要触发一个函数.
The above code doesn't work. I need to trigger a function after the div is shown on the page.
推荐答案
以下是我的处理方法.这使用的是原始JavaScript，但可以轻松地修改为使用jQuery.
Here 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);
// Uncomment this to stop observing at at the right place.
// observer.disconnect();
} ();
</script>
</body>
</html>
这篇关于div加载后调用js函数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
