我有一个div元素,它是在单选按钮点击后加载的。
需要在加载后隐藏该div的一部分。
$(function($) {
$('.div_element').on('load', function() {
$('.textbox').hide();
});
});
上述代码无法生效。我需要在div显示在页面上后触发一个函数。
我有一个div元素,它是在单选按钮点击后加载的。
需要在加载后隐藏该div的一部分。
$(function($) {
$('.div_element').on('load', function() {
$('.textbox').hide();
});
});
<!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 是否存在,如果存在,则可以进行进一步操作:
$(() => {
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
});
$("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);
});
"$("input[name='YOUR_BUTOTN_NAME_GOES_HERE']").click(function(){"
,您需要提供您在代码中使用的名称属性。例如<input type="radio" name="sample" value="test">
,那么您的代码应该是"$("input[name='sample']").click(function(){"
谢谢 :)
检查 Div 是否已初始化
$(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.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='textboxContainer'></div>
<div class='domNewDiv'>
</div>
当事件被调用时,您可以使用“()”来调用它:
$(function($) {
$('.div_element').on('load', function() {
$('.textbox').hide();
}());
});
<div>
不会“加载”。你想在<div>
出现在 DOM 中时立即调用一个函数吗?搜索变异观察器。如果<div>
不在 DOM 中,那么你无法将事件监听器绑定到它上面。 - Sebastian Simon