javascript - 使用 jQuery/javascript 进行 HTML 输入 id 操作

Question

每当用户从下拉菜单中选择不同的选项时，我有一个显示不同 html 的 div。我想要实现的是操纵 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

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

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

什么是事件委托(delegate)？ ---> http://learn.jquery.com/events/event-delegation/