jquery - attach event to child elements, code improvements and better maintenability -
i have form, identify attribute form[data-role="party-form"].
i need attach logic n elements [data-role="element1...n"] , i've done way:
$('form[data-role="party-form"] [data-role="element1"]').change(function(e){ var el = $(e.target); var form = el.parents('form[data-role="party-form"]'); // custom logic element 1 accessing other form elements } // ... $('form[data-role="party-form"] [data-role="elementn"]').change(function(e){ var el = $(e.target); var form = el.parents('form[data-role="party-form"]'); // custom logic element n accessing other form elements } i don't code lot, there lots of repetition (parent selector , logic parent form)
i thinking refactoring "onchange" listener "input" elements of form (and switch on clicked element), or more object-oriented approach, - before continue - has in mind better way implement ? thanks
using jquery attribute ^ selector,it match element attribute start width something:
$('form[data-role="party-form"] [data-role^="element"]').change(function(e){ var el = $(e.target); var form = el.parents('form[data-role="party-form"]'); var index = form.attr("data-role").replace("element",""); // custom logic element [index] }
Comments
Post a Comment