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();
        }
    });
});