2

每次用户从下拉菜单中选择不同的选项时，我都有一个 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!');
 });
4

1 回答 1

5

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

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

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

于 2013-05-24T16:39:01.177 回答