Как использовать селектор идентификаторов после jQuery html()

Question

Удивительно попытаться понять, почему функция alert("hello") не создается после нажатия нескольких раз ... Существует какой-то способ выполнения этой функции?

Обратите внимание, что после обновления не работает, используя html() с идентификатором «нажмите» в кнопке.

Любая идея? См: 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

Вы заменить содержимое всей 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>');