有沒有一種方式與jQuery組監聽器？

Question

我正在使用gulp將許多js文件合併到一個文件中。對於需要添加JS代碼的每個頁面，我創建一個新文件以保持代碼分離。

我的方法存在的問題是，在多個表單中重複使用我的HTML中的id名稱時，錯誤的事件可能會在錯誤的時間被解僱，從而導致一些問題。

爲了防止發生這個問題，我通常在大多數情況下使用表單名稱來啓動我的所有選擇器。

例如

$(function(){ 

    $('#create_reservation_form #type').change(function(e){ 
     // do stuff... 
    }); 

    $('#create_reservation_form #brand').change(function(e){ 
     // do stuff... 
    }); 

    $('#create_reservation_form #category').change(function(e){ 
     // do stuff... 
    }); 

}); 

上述工作非常除了我每個選擇之前重複我的包裝標識。有沒有一種方法可以避免每次重寫封裝標識時只需使用給定的ID來包裝以下代碼？

換句話說，是有沒有辦法做這樣的事情（這下面的代碼已經由語法，因此它不工作）

$(function(){ 

    $('#create_reservation_form').group(function(){ 

     $('#type').change(function(e){ 
      // do stuff... 
     }); 

     $('#brand').change(function(e){ 
      // do stuff... 
     }); 

     $('#category').change(function(e){ 
      // do stuff... 
     }); 

    }); 

}); 

Answer 1

可以委託給表單元素和鏈中的任何數量的on()或做如@Keith表明通過存儲父對象作爲變量，並使用find()或委派on()

$('#create_reservation_form') 
    .on('change', '#type', function(e) { 
     // do stuff... 
    }).on('change', '#brand',function(e) { 
     // do stuff... 
    }).on('change', '#category',function(e) { 
     // do stuff... 
    }); 

或者更多組織清楚：

$('#create_reservation_form') 
    .on('change', '#type', typeChange) 
    .on('change', '#brand', brandChange) 
    .on('change', '#category', catChange); 

// since each file will include own `$(function()` wrapper can re-use 
// these function names since they will each be in own scope 
function typeChange(e){ 
    // do stuff for type input... 
} 

function brandChange(e){ 
    // do stuff for brand input... 
} 

function catChange(e){ 
    // do stuff for category input... 
}