HTML输入id操作与jQuery / javascript

Question

我有一个div，每次用户从下拉菜单中选择不同的选项时显示不同的html。我想要实现的是操纵div输出的id。

这是我的html下拉菜单的代码:

<select name="surveys" id="surveys" required>
           <option value="">Select a Survey</option>
            <cfloop query="application.clientAdminSurveys">
               <option value="#name#">#name#</option>
            </cfloop>
        </select>

这是控制下拉菜单的JS:

 $('#surveys').change(function (event) {
     var survey = $('#surveys').val().toLowerCase();
     if(survey.indexOf('consultation') !== -1 && survey.indexOf('cancellation') === -1 ){
         $('.type').show();
         $('.type').html('<input type="text" id="consultServiceType" name="consultServiceType" placeholder="Consult Service Type"  /> <input type="text" id="eventDate" name="consultDate" placeholder="Consult Date"  /><input type="text" id="consultantName" name="consultantName" placeholder="Consultant Name" /> '); 
     }else if(survey.indexOf('cancellation') !== -1){
         $('.type').show();
         $('.type').html('<input type="text" id="eventDate" name="cancellationDate" placeholder="Cancellation Date" />');
     }else if(survey.indexOf('procedure') !== -1 && survey.indexOf('cancellation') === -1){
         $('.type').show();
         $('.type').html('<input type="text" id="serviceType" name="serviceType" placeholder="Service Type"/><input type="text" id="eventDate" name="serviceDate" placeholder="Service Date" /><input type="text" id="serviceProviderName" name="serviceProviderName" placeholder="Service Provider Name" /><input type="text" id="serviceRevenue" name="serviceRevenue" placeholder="Service Revenue" />');
     }else if(survey.indexOf('inquiry') !== -1){
         $('.type').show();
         $('.type').html('<input type="text" id="eventDate" name="inquiryDate" placeholder="Inquiry Date" />');
     }else{
         $('.type').hide();
     }
 });

如何输出JS代码:

 <div class="type"></div>

firebug的HTML输出:

<div class="type">
  <input id="consultServiceType" type="text" placeholder="Consult Service Type" name="consultServiceType">
  <input id="eventDate" type="text" placeholder="Consult Date" name="consultDate">
  <input id="consultantName" type="text" placeholder="Consultant Name" name="consultantName">
</div>

我需要能够操纵来自div输出的ID。任何想法我怎么能做到这一点?当我这样做的时候:

$('.type').mouseenter(function() {
    alert('hello!');
});

我得到了警报，但我想深入到<input id="eventDate" type="text" placeholder="Consult Date" name="consultDate">，像这样:

 $('.type:input#eventDate').mouseenter(function() {
        alert('hello!');
 });

Answer 1

使用事件委托- (当您动态添加#eventDate时)

 $('.type').on('mouseenter','#eventDate',function() {
        alert('hello!');
 });

什么是事件委托?---> http://learn.jquery.com/events/event-delegation/