Calling Function in Jquery

Question

I have this dropdown (selectbox) HTML code in a web page, which i am storing it in a Cookie using Jquery

<select onchange="if (this.value != '') {Add_Search_Param('f-' + this.value.split('|')[1], this.value.split('|')[0]); Refine();}"><option value="">Find by LENGTH</option><option value="185|14 inch">14 inch (31)</option><option value="186|11 inch">11 inch (39)</option><option value="187|8 inch">8 inch (38)</option></select>

i have following code which reads the above select tag using jquery and display same dropdown on that page. I have also set one function to select tag which i got from cookie using jquery but the problem is that the function is not getting called when i change option in drop down. please help me

<div id="content"></div>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
 var refineResults = true;
 function Add_Search_Param(param, value, append, forceRefine) {
 alert("Good");
 if (param == 'pricerange') {
 value = value.split('-');
 Add_Search_Param('minprice', value[0]);
 Add_Search_Param('maxprice', value[1], append, forceRefine);
 return;
 }
 if (SearchParams.indexOf(param + '=') != -1) {
 if (append) {
 SearchParams = SearchParams.replace(new RegExp(param + '=([^&]*)'), param + '=1ドル' + escape(value));
 }
 else {
 SearchParams = SearchParams.replace(new RegExp(param + '=([^&]*)'), param + '=' + escape(value));
 }
 }
 else {
 SearchParams = SearchParams + '&' + param + '=' + escape(value);
 }
 if (param != 'page') {
 Add_Search_Param('page', 1);
 }
 if (forceRefine) {
 Refine();
 }
 }
 function Refine() {
 if (SearchParams.substr(0, 1) == '&') {
 SearchParams = SearchParams.substr(1);
 }
 location.href = location.pathname + '?' + SearchParams;
 return false;
 }
 function OpenNewWindow(url, width, height) {
 window.open(url, null, 'top=10,left=10,menubar=0,resizable=1,scrollbars=1,width=' + width + ',height=' + height)
 }
 function OnSubmitSearchForm(event, form) {
 var additionalSearch = v$('additionalsearch');
 if (additionalSearch) {
 if (additionalSearch.value != 'Search Within') {
 Add_Search_Param('search', ' ' + additionalSearch.value, true);
 }
 }
 if (refineResults) {
 CancelEvent(event);
 return Refine();
 }
 else {
 return true;
 }
 }
 function OnKeyDownPageInputBox(evt, inputBox) {
 if (IsReturnKey(evt)) {
 Add_Search_Param('page', inputBox.value);
 Refine();
 return false;
 }
 }
 function hello() {
 alert("Hello");
 }
 function getCall() {
 function parseHtml(document) {
 var k = 0;
 var s = 0;
 var count = $(document).find('select').each(function() {
 var str = $(this).attr('onchange');
 if (str.indexOf("Add_Search_Param('f-' + this.value.split('|')[1],") != -1) {
 createCookie("onchangecall", $(this).attr('onchange'));
 createCookie("options", $(this).html());
 //alert($(this).html());
 k = 1;
 }
 else {
 s = 1;
 }
 }).length;
 if (s == 1 && k == 0) {
 $(function() {
 var atr = 'onchange="' + readCookie("onchangecall") + '; Refine();}"';
 $("#content").append('<select id="sel" onchange="fly()">' + readCookie("options") + '</select>');
 $("#sel").attr("onchange", atr);
 alert($("#sel").attr("onchange"));
 });
 }
 }
 $.ajax({
 type: "GET",
 url: "",
 dataType: "html",
 success: parseHtml
 });
 function createCookie(name, value) {
 var expires = "";
 document.cookie = name + "=" + value + expires + "; path=/";
 }
 function readCookie(name) {
 var nameEQ = name + "=";
 var ca = document.cookie.split(';');
 for (var i = 0; i < ca.length; i++) {
 var c = ca[i];
 while (c.charAt(0) == ' ') c = c.substring(1, c.length);
 if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length);
 }
 return null;
 }
 }
 getCall();
</script>
<input type="image" src="/v/vspfiles/assets/images/image.jpg" style="float:left; margin:0 0 0; font-size: 13px; font-family: arial;"/>

Answer 1

Remove the inline onchange and utilize JQuery event handlers:

<select id="theSelect">
 <option value="">Find by LENGTH</option>
 <option value="185|14 inch">14 inch (31)</option>
 <option value="186|11 inch">11 inch (39)</option>
 <option value="187|8 inch">8 inch (38)</option>
</select>

and the following js

$(function() {
 $("body").on("change", "#theSelect", function() {
 if (this.value != '') {
 alert("now");
 Add_Search_Param('f-' + this.value.split('|')[1], this.value.split('|')[0]);
 Refine();
 }
 });
});

• Jamund Ferguson: FYI, .on() requires jQuery 1.7.x, if running an older version you'll want to use .delegate(). Also if ($(this).val()) { to if (this.value() != '') { will probably be equivalent!