I have done the following:
- Put all event handlers inside jQuery DOM ready to ensure all events will only run
- Define var selector on top of events for caching
Please see comments below for what I consider to be the problem
$(document).ready(){ var searchCountry1 = $("#searchCountry1"); var linkCountry1 = $("#linkCountry1"); var codeCountry1 = $("[name='codeCountry1']"); //worst part here is if I have 10 searches,links, and codes. is it worst? // and for every event I have this : searchCountry1.click(function(){ //get json or open another search window }); codeCountry1.keypress(function() { codeCountry1.val(""); //or clear all other related fields(city or state) to reset }); $linkCountry1.click(function(){}); //call redirect }); function redirect(codeval,url){} I've posted a small amount of code, but please help me imagine what if I have too many searches, fields and links having the same functionality but diff parameter?
I'm thinking about OOP or a design pattern for this. But no way, (I think for now). Please encourage me or suggest other ways on how to improve this code structure.
<input name="codeCountry1" /><br /> <input type="button" id="searchCountry1" /><br /> <a id="linkCountry1" href="#"><a/><br /> <input name="codeState1" /><br /> <input type="button" id="searchState1" /><br /> <a id="linkState1" href="#"><a/><br /> <input name="codeCity1" /><br /> <input type="button" id="searchCity1" /><br /> <a id="linkCity1" href="#"><a/><br /> <input name="codeOther1" /><br /> <input type="button" id="searchOther1" /><br /> <a id="linkOther1" href="#"><a/><br /> <input name="codeOther2" /><br /> <input type="button" id="searchOther2" /><br /> <a id="linkOther2" href="#"><a/><br /> 2 Answers
Answers 1
It is obvious, that you need to use the same handler(s) on top of all your children that generate these events.
One of the most useful feature in browser is Event Bubbling
I prefer do not use classes for something that is not connected with styling. I use data-attributes.
So you need to wrap your children (if it is not wrapped yet), and give each children some data attribute that shows what handler to use:
<div data-role="wrapper"> <input name="codeCountry1" data-action="clear" data-role="country"/><br /> <input type="button" id="searchCountry1" data-action="search" data-role="country" /><br /> <a id="linkCountry1" href="#" data-action="redirect" data-role="country"><a/><br /> <input name="codeState1" /><br /> <input type="button" id="searchState1" /><br /> <a id="linkState1" href="#"><a/><br /> <input name="codeCity1" /><br /> <input type="button" id="searchCity1" /><br /> <a id="linkCity1" href="#"><a/><br /> <input name="codeOther1" /><br /> <input type="button" id="searchOther1" /><br /> <a id="linkOther1" href="#"><a/><br /> <input name="codeOther2" /><br /> <input type="button" id="searchOther2" /><br /> <a id="linkOther2" href="#"><a/><br /> </div> And listen to the children events on the wrapper:
var $wrapper = $( '[data-role="wrapper"]' ); $wrapper.on('click', '[data-action="search"][data-role="country"]', function(e) { console.log(e.target) // child element //get json or open another search window }); $wrapper.on('click', '[data-action="redirect"][data-role="country"]', function(e) { console.log(e.target) // child element //call redirect }); $wrapper.on('click', '[data-action="clear"][data-role="country"]', function(e) { console.log(e.target) // child element // from current element got to the wrapper and find all children inside it with something that you need var $other = $(e.target).closest('[data-role="wrapper"]').find('[data-action="clear"]').val(""); //or clear all other related fields(city or state) to reset }); This approach gives you not only three handlers for all children, you can also dynamically add or remove children without worrying about handlers. You can also remove id's from all elements (if you don't need form serialize).
As a disadvantage you see that you have to add logic layer into HTML, however it becomes more obvious in HTML what will be on click or something else...
Answers 2
Learn React https://facebook.github.io/react/ It will help you organise your code and follow good programming practices instead of making messy jquery spaghetti
0 comments:
Post a Comment