javascript - How to attach handler/function to different objects -

need enlightened how define jquery ui slider , bind different objects on page.

function setphrasefontsize() {    f1 = $("#slider").slider("value");    f1 = 30 - (f1 * 15);    f2 = $("#slider").slider("value");    f2 = 30 + (f2 * 15);    $("#phrase1").css({      'font-size': f1 + 'pt'    });    $("#phrase2").css({      'font-size': f2 + 'pt'    });  }    $("#slider").slider({    value: 0,    min: -1,    max: 1,    step: 0.1,    stop: function(event, ui) {      setphrasefontsize();      $('input[name="weighting"]').val($("#slider").slider("value"));        mydata = $('#feedback').serialize();        alert("ajax post: " + mydata);    }  });

    <link href="https://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" rel="stylesheet">      <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" integrity="sha256-mfvzlkhceqatnogioxvee8fiwmzzg4w85qfrfifbfyc= sha512-dtfge/zgomypp7qbhy4gwmegsbsdzecxz7iritjcc3spuftf0kufbdz/ixg7artxmdjlxdmezhubenikykgvyq==" crossorigin="anonymous">      <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>      <script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>    <form id="feedback">    <input type="hidden" name="phrase1" value="old">    <input type="hidden" name="phrase2" value="new">    <input type="hidden" name="weighting">  </form>  <table width="100%">    <tr style="height:100px">      <td>        <div id="phrase1" style="text-align: left;">old</div>      </td>      <td>        <div id="phrase2" style="text-align: right;">new</div>      </td>    </tr>  </table>  <div id="slider"></div>

i have pair of phrases , use ui slider let user specify weighting between them. have form hidden fields , when stop fires pick phrases form , weigting slider , post them via ajax call. works fine.

now want change page , instead of having 1 pairing per round trip want populate whole page pairs of phrases , allow user work thru each 1 , choose weighting above. don't want duplicate code etc not @ clear on how can specify slider handler once , once only. ideally slider create once , made visible on each pairing gets focus. when fires stop event should of course pick current pairing , pass phrases , appropriate weighting ajax call.

what's best practice way of doing this?

using common classname on slider elements easiest way.

function setphrasefontsize(slidernum, value) {  	f1 = 30 - (value * 15);    	$("#phrase" + slidernum).css({  		'font-size': f1 + 'pt'    	});  }      $(".slider").slider({    value: 0,    min: -1,    max: 1,    step: 0.1,    stop: function(event, ui) {      var slidernum = $(this).attr("id").replace("slider", "");      var value = $(this).slider("value");      setphrasefontsize(slidernum, value); // pass slidernum , value      $('input[name="weighting'+ slidernum +'"]').val(value); // target 'this' instead        mydata = $('#feedback').serialize();        alert("ajax post: " + mydata);    }  });

<link href="https://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" rel="stylesheet">  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" integrity="sha256-mfvzlkhceqatnogioxvee8fiwmzzg4w85qfrfifbfyc= sha512-dtfge/zgomypp7qbhy4gwmegsbsdzecxz7iritjcc3spuftf0kufbdz/ixg7artxmdjlxdmezhubenikykgvyq==" crossorigin="anonymous">  <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>  <script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>      <!-- per drew gaynor's comment - should using js mv* framework (or @ least js template tool) output html //-->    <form id="feedback">    <input type="hidden" name="weighting1">    <input type="hidden" name="weighting2">  </form>    <table width="100%">    <tr style="height:100px">      <td>        <div id="phrase1_old" style="text-align: left;">old</div>      </td>      <td>        <div id="phrase1" style="text-align: right;">new</div>      </td>    </tr>  </table>  <div id="slider1" class='slider'></div>    <table width="100%">    <tr style="height:100px">      <td>        <div id="phrase2_old" style="text-align: left;">old</div>      </td>      <td>        <div id="phrase2" style="text-align: right;">new</div>      </td>    </tr>  </table>  <div id="slider2" class='slider'></div>

if intend have 1 slider instance @ 1 time (although over-engineering in high amounts of sliders), need bind mouseover , mouseout event on each 'phrase' div, mouseover event initiating plugin code, , mouseout event calling dispose.