Question

请在此处查看示例代码：http://jsfiddle.net/uzgt3wmw/11/

HTML：

<div> HTML<br>
<li>
    <select id="Status" type="text">
        <option value="New">New</option>
        <option value="Complete">Complete</option>
    </select>
</li>
<div>
<br><br>
    JS
    <div id="jsoption"></div> 
    <button id="addOptions">Add Options</button>

Jquery的：

var str1 ="<li><select id=\"Status1\" type=\"text\"><option value=\"New\">New</option><option value=\"Complete\">Complete</option></select></li>";

$("#addOptions").click( function() {
    $("#jsoption").html(str1);
}
 );

$("#Status").change( function() { alert("html ok");} );
$("#Status1").change( function() { alert("js ok");} )

我创造了2个下拉。

一个使用HTML，另一个使用按钮创建。

两个下拉列表都显示相同的信息，但.change不能正常运行id = Status1，它正在处理id = Status，有什么想法吗？

Answer 1

这是因为动态元素。使用on方法。此外，您的HTML无效！

＆＃13;

$(document).ready(function() {
  var str1 = "<li><select id=\"Status1\" type=\"text\"><option value=\"New\">New</option><option value=\"Complete\">Complete</option></select></li>";

  $("#addOptions").click(function() {
    $("#jsoption").html(str1);
  });

  $("#Status").change(function() {
    alert("html ok");
  });
  $(document).on("change", "#Status1", function() {
    alert("js ok");
  })
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>HTML
  <br/>
  <select id="Status" type="text">
    <option value="New">New</option>
    <option value="Complete">Complete</option>
  </select>
</div>
<div>
  <br/>
  <br/>JS
  <div id="jsoption"></div>
  <button id="addOptions">Add Options</button>
</div>

＆＃13;

Answer 2

设置#status1时，问题change event不存在。

这样做：

$(document).on("change", "#Status1", function(){
});

Answer 3

这是因为您在按页面加载时在Dom上创建的第二个下拉列表不存在。所以你需要在选择器上使用它。（早期的live用于相同的目的）。

      $(document).on("change","#id",function(){alert(something)});

希望这会有所帮助

快乐学习：）

Answer 4

试试这个

 $("#jsoption").change( function() { alert("js ok");} );

JQuery onclick在下拉列表中没有按预期工作

4 个答案: