Question 37227 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

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

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?

Tags:

2

Answers


  1. 0

    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.

    Login or Signup to reply.
  2. 0

    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 class="wrapper">
<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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search