Question

我有一个div元素，单击一个单选按钮后就会加载它。

加载div后需要隐藏其一部分。

$(function($) {
  $('.div_element').on('load', function() {
    $('.textbox').hide();
  });
});

上面的代码不起作用。页面上显示div后，我需要触发一个函数。

Answer 1

尽管这可能不是一个好的解决方案，但您可以检查一下div是否存在，如果存在，则可以做进一步的事情：

$(function() {
    var checkDiv = setInterval(function(){
       if($('.div_element').length > 0) {    // it would be good if you would use id instead of the class
           clearInterval(checkDiv);
           //further action here
       } 
    }, 100); // check after 100ms every time
});

Answer 2

这就是我要做的。这使用的是原始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>

Answer 3

检查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>

Answer 4

据我了解，您需要在单击单选按钮时执行一项操作。这是您的代码应该开始的地方。

$("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(){"这一行中，您需要提供在代码中使用的name属性。例如<input type="radio" name="sample" value="test">，则您的代码应为"$("input[name='sample']").click(function(){"

谢谢：）

Answer 5

在事件调用时，您可以使用“（）”来调用它：

$(function($) {
  $('.div_element').on('load', function() {
    $('.textbox').hide();
  }());
});

加载div后调用js函数

5 个答案: