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后无法正常工作

回答

相关问题