jquery在post後無法正常工作

我在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），我沒有任何警報或任何東西。任何想法可能是什麼問題？我甚至嘗試在第二個下拉列表中添加一個類，然後在該類中調用它，但沒有成功。希望我明確自己。

在此先感謝。

來源

2014-10-10 JonnyDevv

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

由於您正在替換第二個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，它綁定到元素的父

來源

2014-10-10 10:34:58

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

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

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

來源

2014-10-10 10:40:15 KmeCnin

jquery在post後無法正常工作

回答

相關問題