jquery .change() function not working on dynamically changed element -
i have 1 button , 2 select elements. in jquery code there 2 event handlers:
- if click button 1st select box changes.
- if first select box changed second box changes.
so if click button 1st select box change , 1st select box has changed second select box should changed well. second box not changing. here code. there live link of code.
<button id="b_a_1"> click select 2nd element </button> <br><br><br> : <select id='s_a'> <option value=1>1st element</option> <option value=2>2nd element</option> <option value=3>3rd element</option> <option value=4>4th element</option> </select> b : <select id='s_b'> <option value=1>first element selected</option> <option value=2>second element selected</option> <option value=3>third element selected</option> <option value=4>fourth element selected</option> </select> <script type="text/javascript"> $("#b_a_1").click(function(){ $("#s_a").val(2); }); $("#s_a").change(function(){ $("#s_b").val($("#s_a").val()); }); </script> i have tried :
$(document.body).on('change', '#s_a', function(){ $("#s_b").val($("#s_a").val()); }); but no good. how do it?
$("#b_a_1").click(function() { $("#s_a").val(2).change();//run change event manually }); $("#s_a").change(function() { $("#s_b").val($("#s_a").val()); });<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button id="b_a_1"> click select 2nd element </button> <br> <br> <br>a : <select id='s_a'> <option value=1>1st element</option> <option value=2>2nd element</option> <option value=3>3rd element</option> <option value=4>4th element</option> </select> b : <select id='s_b'> <option value=1>first element selected</option> <option value=2>second element selected</option> <option value=3>third element selected</option> <option value=4>fourth element selected</option> </select>use .change() call change event manually
Comments
Post a Comment