.click Jquery/Javascript not working

Question

I'm generating some javascript/jquery on the fly to control some events on my form. The .click event has no response for me in checkboxes and dropdownlist actions. Here is my code after the whole page is generated. The first part is working but not the second. What I'm doing wrong?

Here is the first part

<div class="section row" id="divQ1113"  style="display: none;">

<div class="section row principal_question">
    <label>Escoja una opción</label>    </div>

    <div class="section row sub_question">
        </div>

<div class="section row">
    <select name="Q1113" id="Q1113">
       <option value="">Opciones</option>
       <option value="Q1113_QO3514">SI</option>
       <option value="Q1113_QO3515">NO</option>
    </select>   </div>

<script type="text/javascript">
  function finputQ394_2806() {
    var element = x$("input#Q394");
    var val = "undefined";

    if( x$(element).attr("type") instanceof Array && (    x$(element).attr("type")[0] == "radio" || x$(element).attr("type")[0] == "checkbox" ) ) {
                    val = x$("input#Q394").filter(function() {return this.checked;}).attr("value");
                }
                else if(x$(element).attr("type") == "radio" || x$(element).attr("type") == "checkbox") {
                    val = x$("input#Q394").filter(function() {return this.checked;}).attr("value");
                }
                else {
                    val = x$("input#Q394").attr("value");
                }

                if(val == 8) {
                    x$("div#divQ1113").setStyle("display", "block");
                }
                else {
                                                    clearInputs("div#divQ550");
                            x$("div#divQ550").setStyle("display", "none");

                    clearInputs("div#divQ1113");
                    x$("div#divQ1113").setStyle("display", "none");
                }
            }/*);*/

            x$("input#Q394").click(finputQ394_2806);
            /*appendToTrigger("input#Q394");*/
            appendToTrigger('finputQ394_2806');

</script>   

And here is the second:

<div class="section row" id="divQ550"  style="display: none;">
        <div class="section row principal_question">
    <label class="ranking_question">Podría valorar nuestro Centro de Negocios</label>   </div>




<div class="section row">
            <label class="col one-third question_help_min">Muy mal</label>      <div class="col one-third">&nbsp;</div>
            <label class="col one-third question_help_max" style="text-align: right;">Excelente</label> </div>
<div class="section row">
    <div class="col one" style="height: 1px;"></div>
    <div class="col one" style="height: 1px;"></div><div class="col one" style="height: 1px;"></div><div class="col one"><label style="text-align: center;">0</label><input value="0" style="display: block; margin: 9px 0px 0px -2px;" type="radio" name="Q550" id="Q550" /></div><div class="col one"><label style="text-align: center;">1</label><input value="1" style="display: block; margin: 9px 0px 0px -2px;" type="radio" name="Q550" id="Q550" /></div><div class="col one"><label style="text-align: center;">2</label><input value="2" style="display: block; margin: 9px 0px 0px -2px;" type="radio" name="Q550" id="Q550" /></div><div class="col one"><label style="text-align: center;">3</label><input value="3" style="display: block; margin: 9px 0px 0px -2px;" type="radio" name="Q550" id="Q550" /></div><div class="col one"><label style="text-align: center;">4</label><input value="4" style="display: block; margin: 9px 0px 0px -2px;" type="radio" name="Q550" id="Q550" /></div><div class="col one"><label style="text-align: center;">5</label><input value="5" style="display: block; margin: 9px 0px 0px -2px;" type="radio" name="Q550" id="Q550" /></div><div class="col one" style="height: 1px;"></div><div class="col one" style="height: 1px;"></div>      <div class="col one" style="height: 1px;"></div>
</div>

<script type="text/javascript">
                    function finputQ1113_QO3514_2808() {
                /*x$("input#Q1113_QO3514").click(function() {*/
                    var vcond = [3514];
                    var ret =  getQuestionOptionValues("div#divQ1113");
                    if("in" == "in") {
                        if(optAnyInArray(ret, vcond)) {
                            x$("div#divQ550").setStyle("display", "block");
                        }
                        else {

                            clearInputs("div#divQ550");
                            x$("div#divQ550").setStyle("display", "none");
                        }
                    }
                }/*);*/

                x$("input#Q1113_QO3514").click(finputQ1113_QO3514_2808());
                /*appendToTrigger("input#Q1113_QO3514");*/
                appendToTrigger('finputQ1113_QO3514_2808');
                                function finputQ1113_QO3515_2808() {
                /*x$("input#Q1113_QO3515").click(function() {*/
                    var vcond = [3514];
                    var ret =  getQuestionOptionValues("div#divQ1113");
                    if("in" == "in") {
                        if(optAnyInArray(ret, vcond)) {
                            x$("div#divQ550").setStyle("display", "block");
                        }
                        else {

                            clearInputs("div#divQ550");
                            x$("div#divQ550").setStyle("display", "none");
                        }
                    }
                }/*);*/

                x$("input#Q1113_QO3515").click(finputQ1113_QO3515_2808());
                /*appendToTrigger("input#Q1113_QO3515");*/
                appendToTrigger('finputQ1113_QO3515_2808');
</script>

Answer 1

You need to bind click event for dynamically generated elements using .on(), see below code

x$(document).on('click',"#Q1113_QO3515",finputQ1113_QO3515_2808());