Using JQUERY hide() on a div causing listeners to stop functioning on that particular div-CodePudding

I am attaching listeners to divs that worked great. There are portions in my App that some of these divs gets hidden using hide() function of JQUERY which pretty much uses the css: style="display: none;"

When my App brings them back using show() function, the listeners seem to stop working, like they've been detached due to me hiding the divs.

For additional info, the listener I am trying to attach is actually the JQUERY AUTOMCOMPLETE plugin https://api.jqueryui.com/autocomplete/

I basically call this function to attach this to a target element

    function my_autoComplete(elem,url,params_r=[]){
    let cache = {};
    let minLength = params_r['minLength'] || 2;
    let zindex = params_r['zindex'] || "9999";
    let bgcolor = params_r['bgcolor'] || "#0a53be";



    $(elem).autocomplete({
        minLength: minLength,
        select: function( event, ui ) {},
        source: function( request, response ) {
            var term = request.term;
            if ( term in cache ) {
                response( cache[ term ] );
                return;
            }
            $.getJSON( url, request, function( data, status, xhr ) {
                cache[ term ] = data.data;
                response( data.data );
            });
        }
    });
}

and i call it as: my_autoComplete("#search_field","http://myapi.com");

This works perfectly fine and the autocomplete functions attaches to the target element but the moment i hide and show div where the element is in, the automcomplete functions doesn't work.

My current work around now is to show the div block and then call the my_autoComplete function on the element, again. I have to keep doing this everytime i re-show the div block and it seems to have solved my problem, for now.

Is there a way to prevent listeners from being detached or stop working when you the elements they're attached to are hidden temporarily?

CodePudding user response：

there might be an error somewhere else.

As you can see here:

$("#show_hide").click(function(e) {
    if ($("#mydiv").css('display') == 'none' || $("#mydiv").css("visibility") == "hidden") {
    $("#mydiv").css("visibility", "visible");
  } else {
    $("#mydiv").css("visibility", "hidden");
    $("#mydiv").css("color", "green");
  }
});

$("#mydiv").click(function(e) {
  $(this).css("color", "red");
});

$("#mydiv1").click(function(e) {
  $(this).css("color", "red");
});

$("#show_hide1").click(function(e) {
  if ($("#mydiv1").css('display') == 'none' || $("#mydiv").css("visibility") == "hidden") {
    $("#mydiv1").css("display", "block");
  } else {
    $("#mydiv1").css("display", "none");
    $("#mydiv1").css("color", "green");
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="mydiv">
Click me, click the button, click the button again and click me again!
</div>
<button id="show_hide">
Show/Hide
</button><br>
<span>Next test:</span>

<div id="mydiv1">
Click me, click the button, click the button again and click me again!
</div>
<button id="show_hide1">
Show/Hide
</button>

As you can see, the triggers are not disappearing at both.

CodePudding user response：

You probably have something else going on that prevents/kills the listener. The default autocomplete setup doesn't do that on show/hide:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>autocomplete demo</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.12.4.js"></script>
  <script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
 
<button>toggle</button>
<br>
<div >
<label for="autocomplete">Select a programming language: </label>
<input id="autocomplete">

 </div>
 
<script>
$( "#autocomplete" ).autocomplete({
  source: [ "c  ", "java", "php", "coldfusion", "javascript", "asp", "ruby","aaa","sss","ddd","fff" ]
});


$("button").click( () => {
  $('.wrapper').toggle();
});

</script>
 
</body>
</html>