JavaScript中的按鈕html元素只能工作一次

Question

即時通訊相當新的JavaScript和jQuery。

我目前正在製作一個網站，其中我有一個組合框沿着一邊使用.load（）函數來傳遞加載和填充窗體時在組合框上選擇的值。

問題是，按鈕的工作原理，但只有一次... 我怎樣才能使這個按鈕的工作，而無需重新加載頁面？

btw：我正在使用kendo的小部件。

<?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); 
?> 

<td> <input name="seleccionCliente1" id="seleccionCliente1" /></td> 

<script> 

var data =[<?php echo $searchbox1; ?>]; 


$("#seleccionCliente1").kendoAutoComplete({ 
    dataSource: data, 
    change: function(){ 
    var autocomplete = $("#seleccionCliente1").data("kendoAutoComplete"); 
    //window.location = "/mensajeria/mensajeriamain.php?value="+ autocomplete.value(); 
    } 
    }); 

</script> 

<button id="Fill" class="k-button">Fill Form</button><script type="text/javascript"> 

    $("button").click(function(){ 

    var autocomplete = $("#seleccionCliente1").data("kendoAutoComplete"); 

    var data= autocomplete.value(); 
    alert(data); 
    $("div1").load('/mensajeria/agregarViajes.php', {value:data}); 
    }); 

</script> 

<div1> </div1> 

編輯：我找到了解決問題的方法。 這個事實似乎是.load函數替換了它將加載遠程頁面的div元素，並且發現了保存它的javascript函數。從文檔到元素。

由於它依靠使用.html（）jquery函數清楚地生成html表單，因此它的工作很髒並且不實用。如果其他人知道如何清理這個，我將非常感謝它，因爲這在編程時非常有用。

<button id="Fill" class="k-button">Fill Form</button><script type="text/javascript"> 

$('#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('<p1 id="Form"></p1>'); 
    } 

    $('div1').html('<p1 id="Form"><h2>Formulario Agregar Viajes</h2><form id="testform" action="verifico.php?action=viaje" method="post"><table><tr><th>Razon Social:</th><th>Telefono:</th><th>Interno:</th></tr><tr><td> <input name="seleccionCliente2" id="seleccionCliente2" /></td><td> <input type="int" name="f_Telefono" id="f_Telefono" /></td><td> <input type="int" name="c_Interno"/></td> </tr><tr> <th> CUIT/CUIL </th> <th> EMAIL </th> <th> Caso Cerrado </th> </tr><tr><td> <input type="text" name="CUIT/CUIL" /></td><td> <input type="text" name="E-mail" id="E_email" /></td><td> <input type="checkbox" name="cerrado" /> </td> </tr><tr> <th>Direccion Principal:</th> <th>Razon Social</th> </tr> <tr> <td> <input type="text" name="Direccion_Principal" /></td> </tr></table><table><th> NOTAS: </th><td> <textarea name="Notas" rows="5" cols="50"> </textarea> </td></table><input type="submit" name="Procesar" value="Procesar"></form></html><em>You bet!</em></p1>'); 

    //$('p1').load('/mensajeria/agregarViajes.php', {value:data}); 
    }); 


</script> 

<div1> </div1> 

，所以我結束了在一個單一的.html線，漂亮的髒加載整個表單頁面，但是現在該按鈕的作品。感謝foamdino將我引向正確的方向！

Answer 1

我想你的意思是這樣做：

$("#Fill").click(function() { 
    formin() 
}); 

在你的代碼沒有實際運行的功能。

Answer 2

這可能是第一次加載頁面時事件處理程序正確綁定到元素的情況，但是在調用加載之後，元素被替換並且不再綁定事件處理程序。

我認爲在jQuery的網站，這個問題涉及的文檔，但我不能找到它 - 這個網站也給出了不同的jQuery AJAX問題的良好破敗： http://www.alfajango.com/blog/the-difference-between-jquerys-bind-live-and-delegate/

Answer 3

你能不能只使用一個get？加載是一個更簡單的獲取，但這種方式你不必鏈接一個元素，你仍然可以使用html（）方法。

$.get("/mensajeria/agregarViajes.php") 
    .success(function (data) { 
     //Add result to DOM 
     $(".div1").html(data); 
    }) 
    .error(function (result) { 
      alert("TODO: Better Error Handling"); 
    });