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

Question

It's amazing to try to understand why the function alert("hello") is not generated after clicking more than once... There is some method to do this function is executed?

Note that doesn't work after update using html() involving id "press" in button.

Any idea? See: http://jsbin.com/atuqu3

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

You're replacing the contents of the entire div with id "relation-states", which is also removing event handlers (since DOM nodes with the handlers attached are being removed). If you want to bind event handlers to all elements that meet a selector now or in the future, check out 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");
  });

or 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

When using .html() , you are deleting all the children of that element and replacing them with new ones. That means that any event handlers attached to those children are lost. You could avoid that by only replacing what you really need to:

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