-1

I'll buy you a beer via Paypal if you can help me out! I have been stuck with this problem for hours, please hear me out.

I am using a live search on my site. When the visitor types something into the form on the index.php page, the form either gives out results or in case nothing is found in the database, it outputs a button instead on the index.php page under the form via echo function. (the page where the search form is ran from is search.php).

That means this button (under the id #Ne) is not on the index.php page HMTL but is echoed through search.php on to the index page.

What i am trying to do is to hide the search form with one of the buttons. The search form is on the index.php page under the id #iskanje.

This is the javascript I am using. If i put this script on the index.php page nothing happens, and if i put it on the search.php page it crashes the whole search form.

<script>
       $( "#Ne" ).click(function() {
      $( "#iskanje" ).hide( "slow" );
    });

</script>

This is the HTML on the index.php page:

<div id="iskanje" class="arcus-content divider-2">

    <div id="main">
    <div class="row services-i ">

        <!-- Naslov -->
        <div class="icon"></div>
        <h5 class="title">Za katero vrsto storitev bi radi oddali vaše povpraševanje?</h5>

        <!-- Input -->
        <input type="text" id="search" autocomplete="off">

        <!-- Rezultati -->
        <h4 id="results-text"> <b id="search-string"></b></h4>
        <ul id="results"></ul>
    </div>

    </div>
</div>

This is some excerpts from the search.php page:

$text = '<button id="Ne"><i class="icon-white"></i>Želim oddati povpraševanje</button>';

and this is the whole echo in case results are not found. 

echo($output . " " . $text);

I hope I have been clear enough. I can even provide the source files if you can help me out with this.

I have also tried 

$( document ).ready(function() {
   $( "#Ne" ).click(function() {
      $( "#iskanje" ).hide( "slow" );
   });

});

Thanks!

Svedr
  • 541
  • 2
  • 4
  • 20

4 Answers4

0

Is the #Ne button added before or after the JavaScript is run? If the button doesn't "exist" when the browser assigns the click handler to the button, it won't work.

However, you can bind the click handler to the parent of the button, like this:

$("body").on("click", "#Ne", function() {
  $( "#iskanje" ).hide( "slow" );
});

This says "bind the click handler to body, and everytime body is clicked, check if it was the button with ID "Ne".

I don't know the direct parent of #Ne, but whatever that is would be more appropriate than body

Andy
  • 13,875
  • 3
  • 46
  • 76
0

The button is not available on DOM ready as you are appending the button dynamically.

Use event-delegation - on(),

$(document).on("click","#Ne",function() {
    $( "#iskanje" ).hide( "slow" );
});
Community
  • 1
  • 1
Shaunak D
  • 19,751
  • 9
  • 41
  • 72
0

try 

$( "body" ).on('click', '#Ne', function() {
  $( "#iskanje" ).hide( "slow" );

});

I guess jquery doesn't find the button, because it's inserted after onload ...

artificialflow3r
  • 26
  • 1
0

first you have to use $(document).ready to wait for the DOM to load second thing is are using jquery post or get method ? if your answer is yes then you need to use .done() method 

$.post(url,{argumets},function(data){
   //data is what is retrieved from the search.php
   // could be empty result in our case we are sending button back 
   // or displaying results in case we have some results

}).done(function(){

//put here the button code 
// this should work for you 
});
HamIsm
  • 33
  • 5