Question

尝试理解为什么在多次单击后不生成函数alert("hello")真是太棒了...有一些方法可以执行此函数吗？

请注意，使用html()更新后，按钮中的ID为“按”，无效。

JavaScript的：

  $(document).ready(function (){
      $("#press").click(function() {
          $("#relation-states").html('<select id="state" name="state"> <option value="Texas">Texas</option> </select><button id="press" type="button" title="" aria-haspopup="true" style="width: 175px;"><span>Select an item</span></button>');;
          alert("hello");
      });
  });

HTML：

  <div id="relation-states">
  <select id="state" name="state">
  <option value="New York">New York</option>
  </select>
  <button id="press" type="button" title="" aria-haspopup="true" style="width: 175px;"><span>Select an item</span></button>
  </div>

Answer 1

您正在用id“relation-states”替换整个div的内容，这也会删除事件处理程序（因为删除了附加处理程序的DOM节点）。如果您想将事件处理程序绑定到现在或将来遇到选择器的所有元素，请查看live：

  $("#press").live("click", function() {
      $("#relation-states").html('<select id="state" name="state"> <option value="Texas">Texas</option> </select><button id="press" type="button" title="" aria-haspopup="true" style="width: 175px;"><span>Select an item</span></button>');;
      alert("hello");
  });

或delegate：

$("#relation-states").delegate("#press", "click", function() {
          $("#relation-states").html('<select id="state" name="state"> <option value="Texas">Texas</option> </select><button id="press" type="button" title="" aria-haspopup="true" style="width: 175px;"><span>Select an item</span></button>');;
          alert("hello");
}

Answer 2

使用.html()时，您将删除该元素的所有子元素并将其替换为新元素。这意味着附加到这些孩子的任何事件处理程序都会丢失。你可以通过只替换你真正需要的东西来避免这种情况：

$('#state').html('<option value="Texas">Texas</option>');

如何在jQuery html（）之后使用ID选择器

2 个答案: