title: button html element with javascript works only once
body: <p>im quite new to javascript, and jquery.</p>
  
  <p>i am currently making a site, in which i have a combobox along side a button that uses the .load() funcion to pass on the value selected on the combobox while loading and populating a form. </p>
  
  <p>problem being, the button works, but only once...
  how can i make this button work without having to reload the page?</p>
  
  <p>btw: i am using widgets from kendo.</p>
  
  <pre><code>    &lt;?php
  // query all clients data
  $query = 'SELECT
  *
  FROM
  clientes
  ORDER BY
  clie_razonsocial';
  $result = mysql_query($query, $db) or die(mysql_error($db));
  
  while ($row = mysql_fetch_assoc($result)) {
  $searchbox1 .=  '"'. $row['clie_razonsocial'] . '"' . ',' ;
  $searchbox1 .=  '"'. $row['clie_telefono1'] . '"' . ',' ;
  $searchbox1 .=  '"'. $row['clie_cuilcuit'] . '"' . ',' ;
  }
  $searchbox1=substr($searchbox1, 0, strlen($searchbox1)-1);
  ?&gt;
  
  &lt;td&gt; &lt;input name="seleccionCliente1" id="seleccionCliente1" /&gt;&lt;/td&gt;
  
  &lt;script&gt; 
  
  var data =[&lt;?php echo $searchbox1; ?&gt;];
  
  
  $("#seleccionCliente1").kendoAutoComplete({
      dataSource: data,
      change: function(){
      var autocomplete = $("#seleccionCliente1").data("kendoAutoComplete");
      //window.location = "/mensajeria/mensajeriamain.php?value="+ autocomplete.value();  
      }
      });
  
  &lt;/script&gt;
  
  &lt;button id="Fill" class="k-button"&gt;Fill Form&lt;/button&gt;&lt;script type="text/javascript"&gt;
  
    $("button").click(function(){
  
    var autocomplete = $("#seleccionCliente1").data("kendoAutoComplete");
  
    var data= autocomplete.value();
    alert(data);
      $("div1").load('/mensajeria/agregarViajes.php', {value:data});
    });
  
  &lt;/script&gt;
  
  &lt;div1&gt; &lt;/div1&gt;
  </code></pre>
  
  <p>edit: i have found a work around to the problem.
  the fact seems to be that the .load function replaces the div element in which it will load the remote page, and breaks out the javascript function holding it as well. from document to element.</p>
  
  <p>the work around is dirty and not practical given it relies on plainly generating the html form with the .html() jquery function. if anyone else knows how to tidy this up i would greatly appreciate it because this isnt very useful when programming.</p>
  
  <pre><code>&lt;button id="Fill" class="k-button"&gt;Fill Form&lt;/button&gt;&lt;script type="text/javascript"&gt;
  
  $('#Fill').live('click', function(){
  
    var autocomplete = $("#seleccionCliente1").data("kendoAutoComplete");
  
    var data= autocomplete.value();
  
  
  
    alert(data);
  
    if(document.getElementById('Form') == null){alert('es nulo');
    $('div1').html('&lt;p1 id="Form"&gt;&lt;/p1&gt;');
    }
  
    $('div1').html('&lt;p1 id="Form"&gt;&lt;h2&gt;Formulario Agregar Viajes&lt;/h2&gt;&lt;form id="testform" action="verifico.php?action=viaje" method="post"&gt;&lt;table&gt;&lt;tr&gt;&lt;th&gt;Razon Social:&lt;/th&gt;&lt;th&gt;Telefono:&lt;/th&gt;&lt;th&gt;Interno:&lt;/th&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt; &lt;input name="seleccionCliente2" id="seleccionCliente2" /&gt;&lt;/td&gt;&lt;td&gt; &lt;input type="int" name="f_Telefono" id="f_Telefono" /&gt;&lt;/td&gt;&lt;td&gt; &lt;input type="int" name="c_Interno"/&gt;&lt;/td&gt;   &lt;/tr&gt;&lt;tr&gt;   &lt;th&gt; CUIT/CUIL &lt;/th&gt;    &lt;th&gt; EMAIL &lt;/th&gt;    &lt;th&gt; Caso Cerrado &lt;/th&gt; &lt;/tr&gt;&lt;tr&gt;&lt;td&gt; &lt;input type="text" name="CUIT/CUIL" /&gt;&lt;/td&gt;&lt;td&gt; &lt;input type="text" name="E-mail" id="E_email" /&gt;&lt;/td&gt;&lt;td&gt; &lt;input type="checkbox" name="cerrado" /&gt; &lt;/td&gt;  &lt;/tr&gt;&lt;tr&gt;   &lt;th&gt;Direccion Principal:&lt;/th&gt;   &lt;th&gt;Razon Social&lt;/th&gt;   &lt;/tr&gt;   &lt;tr&gt;    &lt;td&gt; &lt;input type="text" name="Direccion_Principal" /&gt;&lt;/td&gt;  &lt;/tr&gt;&lt;/table&gt;&lt;table&gt;&lt;th&gt; NOTAS: &lt;/th&gt;&lt;td&gt; &lt;textarea name="Notas" rows="5" cols="50"&gt; &lt;/textarea&gt; &lt;/td&gt;&lt;/table&gt;&lt;input type="submit" name="Procesar" value="Procesar"&gt;&lt;/form&gt;&lt;/html&gt;&lt;em&gt;You bet!&lt;/em&gt;&lt;/p1&gt;');
  
    //$('p1').load('/mensajeria/agregarViajes.php', {value:data});
    });
  
  
  &lt;/script&gt;
  
  &lt;div1&gt; &lt;/div1&gt;
  </code></pre>
  
  <p>so i ended up loading the whole form page in a single .html line , pretty dirty, but now the button works.  thanks to foamdino for steering me in the right direction!</p>