Jquery ReplaceWith - чтение значения ID

Question

Используя этот код, если изменить выпадающий список, содержащий opt1/opt2 я получаю уведомление с указанием идентификатора, как «капля»

Если я щелкая в поле ввода теста поля «ClickMe» , это изменится на новое раскрывающееся меню, но когда я изменю вариант в этом, нет предупреждения, выдавшего мне идентификатор.

<script language="javascript"> 
    $(document).ready(function() { 
     $('#test').bind('click', function() { 
      $(this).replaceWith('<select id="test" name="test"><option value="volvo">Volvo</option><option value="saab">Saab</option><option value="mercedes">Mercedes</option><option value="audi">Audi</option></select>'); 
     }); 

     $("select").change(function(event) { 
      alert(this.id); 
     }); 
    }); 
</script> 

<form> 
    <input id='test' name='test' type='text' value='ClickMe.'><br> 
    <select id='drop' name='drop'> 
     <option value='0'></option> 
     <option value='1'>Opt1</option> 
     <option value='2'>Opt2</option> 
    </select><br> 

    <input type='submit' value='submit'><br> 

    <?php 
     if (isset($_REQUEST['test'])) echo $_REQUEST['test']; 
    ?> 

Почему я не могу видеть id нового списка?

Благодаря

Answer 1

события делегация

$(document).ready(function() { 

    $('#test').bind('click', function() { 
     $(this).replaceWith('<select id="test" name="test"><option value="volvo">Volvo</option><option value="saab">Saab</option><option value="mercedes">Mercedes</option><option value="audi">Audi</option></select>'); 
    }); 

    $('form').on('change', 'select[name="test"]', function (event) { 
     alert(this.id); 
    }); 

}); 

Демо: Fiddle

При использовании нормальной регистрации событий модели, она будет регистрировать обработчик непосредственно к целевому, которые присутствуют в йоте в точка выполнения регистрации обработчика. Таким образом, элементы, добавленные позже динамически, не получат эти обработчики.

Решение этой задачи заключается в использовании делегирования делегирования, в этой модели обработчик зарегистрирован на элемент предка, который будет присутствовать, когда страница загружается селектором, чтобы отфильтровать исходный элемент. Это использует распространение событий - события, происходящие в элементе, распространяются на все элементы предка (есть несколько исключений, таких как событие фокусировки). Таким образом, событие, происходящее в элементе, передается элементу-предшественнику в одном из них, который регистрируется обработчиком, тогда элемент источника событий (event.target) и его предки сопоставляются с селектором, переданным как второй параметр, если он выполняется тогда выполняется обработчик.

Answer 2

Когда элементы динамически вставляются в DOM (Document Object Model), например, используя Ajax, тогда все обработчики событий должны быть привязаны к родительским элементам. Таким образом, для новых элементов, которые необходимо применить .on к родительскому элементу

$('form').on('change', "select", function(event) { 
    alert(this.id);// by javascript 
    // or 
    alert($(this).attr("id");// by jquery 
}); 

Answer 3

Пожалуйста, используйте

$(document).on('change', 'select', function(event) { 
    alert(this.id); 
}); 

Если вы используете jQuery1.6 или под землей, использовать .live

$("select").live('change', function(event) { 
    alert(this.id); 
}); 

Answer 4

когда этот код вызывается:

$ (this) .replaceWith ('VolvoSaabMercedesAudi');

он отвязывает выберите событие изменения, которые переплетены в документе готового