Question

我有一个＆＃39; test.html＆＃39;和一个＆＃39; test.php＆＃39;文件。

＆＃39; test.html＆＃39;：

<html>
  <head>
    <script type="text/javascript" src="/js/jquery-1.8.2.js"></script>
  </head>
  <body>
    <p>Hello</p>
  </body>
</html>

<script type="text/javascript">
  $(function() {
    $("p").on('click', function() {
      $(this).load("test.php");
      $(this).off();
    });
  });
</script>

<script type="text/javascript">
  $(function() {
    $("#sel_1").on('change', function() {
      alert("SELECT changed!");
    });
  });
</script>

＆＃39; test.php＆＃39;：

<?php
  echo "<select id='sel_1'>";
  echo "<option>one</option>";
  echo "<option>two</option>";
  echo "<option>three</option>";
  echo "</select>";
?>

当我点击“＆＃39; p＆＃39; item（Hello），然后jQuery将新内容加载到＆＃39; p＆＃39;。

但是当我更改选择项目时，我希望看到警报消息，但它不会出现。我该如何解决这个问题？

Answer 1

正如其他人所提到的，您需要使用事件委派。

这是 small example ：

HTML：

<div>
    Hello
</div>

<button> Add Content </button>

的javascript：

$(function () {
    $("button")
        .on('click', function () {
            $("div")
                .append(getSelect());
        });

    $("div")
        .on('change', '.mySelects', function () {
            alert('select changed!');
        });
});

function getSelect() {
    return $("<select></select>")
        .addClass("mySelects")
        .append($("<option></option>")
            .html("abc")
            .val("1"))
        .append($("<option></option>")
            .html("def")
            .val("2"));
}

Answer 2

这应该有效：

<script type="text/javascript">
  $(function() {
    $('body').on('change', "#sel_1", function() {
      alert("SELECT changed!");
    });
  });
</script>

jQuery加载和更改

2 个答案: