2014-10-10 4 views
0

我在POST後使用.on()方法時出現問題。 我有3個下拉菜單,每個下拉菜單在第一個菜單改變後填充。 當我更改第一個下拉列表時,其他列表會根據mysql數據庫表重新填充。 問題是第二個下拉菜單的分離功能不能單獨工作。 這裏的HTML:jquery在post後無法正常工作

<div class="form-group row"> 
    <div class="col-md-4"> 
     <label for="inputIlha">Ilha</label><select name="ilha" class="form-control" id="inputIlha"> 
      <option value="1">Santa Maria</option> 
      <option value="2">São Miguel</option> 
      <option value="3">Terceira</option> 
      <option value="4">Graciosa</option> 
      <option value="5">São Jorge</option> 
      <option value="6">Pico</option> 
      <option value="7">Faial</option> 
      <option value="8">Flores</option> 
      <option value="9">Corvo</option> 
     </select> 
    </div> 
    <div class="col-md-4"> 
     <label for="inputConcelho">Concelho</label> 
     <select name="concelho" class="form-control" id="inputConcelho"> 
      <option value="0"></option> 
     </select> 
    </div> 
    <div class="col-md-4"> 
     <label for="inputFreguesia">Freguesia</label> 
     <select name="freguesia" class="form-control" id="inputFreguesia"> 
      <option value="0"></option> 
     </select> 
    </div> 
</div> 

和jQuery功能成功地重新填充所有的下拉菜單:

$("#inputIlha").on("change", function() { 
    var inputIlha = document.getElementById("inputIlha").value; 
    $.post(config.base + "xxxx/xxxxxx/xxx01", { ilha: inputIlha }, function(result) { 
     $("#inputConcelho").replaceWith(result); 
     var inputConcelho = document.getElementById("inputConcelho").value; 
      $.post(config.base + "xxxx/xxxxxx/xxx02", { concelho: inputConcelho }, function(result) { 
       $("#inputFreguesia").replaceWith(result); 
      }); 
     //$("#inputFreguesia").html('<option value="0"></option>'); 
     } 
    ); 
}); 

此功能重新填充第二(#inputConcelho)和第三(#inputFreguesia)下拉列表正確。基於#inputConcelho成功重新填充#inputFreguesia。

問題是當我想更改#inputConcelho。下一個功能將不起作用。

$("#inputConcelho").on("change", function() { 
alert("inputConcelho changed"); 
    var inputConcelho = document.getElementById("inputConcelho").value; 
    $.post(config.base + "xxxx/xxxxxx/xxx02", { concelho: inputConcelho }, function(result) { 
     $("#inputFreguesia").replaceWith(result); 
    }); 
}); 

我試圖添加警報來查看是否有任何迴應,但不成功。我甚至試過這種簡單的功能:

$("#inputConcelho").click(function() { 
    alert("inputConcelho changed"); 
}); 

每次我改變第一個下​​拉列表(#inputIlha)的下拉菜單都重新填充。 但是,當我只改變第二個dropwdown(#inputConcelho),我沒有任何警報或任何東西。 任何想法可能是什麼問題?我甚至嘗試在第二個下拉列表中添加一個類,然後在該類中調用它,但沒有成功。希望我明確自己。

在此先感謝。

+0

可能重複的[動態創建的元素上的事件綁定?](http://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements) – JJJ 2014-10-10 10:36:28

回答

2

由於您正在替換第二個select元素,因此添加到這些元素的處理程序將丟失。

它與Event binding on dynamically created elements?相同。

所以你需要在這裏使用event delegation

$("#inputConcelho").parent().on("change", '#inputConcelho', function() { 
    alert("inputConcelho changed"); 
    var inputConcelho = document.getElementById("inputConcelho").value; 
    $.post(config.base + "xxxx/xxxxxx/xxx02", { 
     concelho: inputConcelho 
    }, function (result) { 
     $("#inputFreguesia").replaceWith(result); 
    }); 
}); 

相反的處理程序綁定到#inputConcelho,它綁定到元素的父

+0

謝謝。像魅力一樣工作。使用.html()而不是像Pierre-Chanel所回答的替換方法會是一種更好的做法嗎? – JonnyDevv 2014-10-10 10:50:30

+0

@JonnyDevv是的...如果你能控制腳本,那會更好 – 2014-10-10 10:53:58

2

我認爲你不應該使用.replaceWith()功能,因爲它取代所有元素(從DOM中刪除)。使用更好的.html(result)並更改服務器發送的結果,以便只有<option>元素。