Having trouble using jQuery selectors in ajax content of jQuery tabs

Question

I have the following hidden jQuery tab: HTML

<div id="tabs-5" class="quote-hidden">
    <div id="quote">
    </div>
 </div>

I am filling the “quote” div dynamically and making it visible with: jQuery

    $(document).ready(function() {
       $("#button1").click(function(){
          var request = $.ajax({
             cashe: "true",
             url: "quote_data.php",
             type: "POST",
             data: {
             state : x,
             age : y,
             gender : z
           }
         });
         request.done( function(html){
            $("#quote").html(html);
            $(".quote-hidden").fadeIn(2000);
            $( "#tabs" ).tabs( "option", "active", 4);
         });
       }):
     });

So far so good. The problem is that I can’t seem to use jQuery to select any of the new elements to perform an action. For example, in the ajax loaded html I can’t select any radio button clicks to change the background-color of the row it’s in or remove the currently “highlighted” row background color: HTML

<tr class=”quote_tr”>
   <td style="text-align: center"><input name="level" value="5000" type="radio">$5,000</td>
   <td>…</td>
   <td>…</td>
</tr><tr class=”quote_tr”>
   <td style="text-align: center"><input name="level" value="6000" type="radio">$6,000</td>
   <td>…</td>
   <td>…</td>
</tr><tr class=”quote_tr active_tr”>
   <td style="text-align: center"><input name="level" value="7000" type="radio">$7,000</td>
   <td>…</td>
   <td>…</td>
</tr>

jQuery

$(document).ready(function() {
   $(".level_choice").click(function(){
        $(this).parent("tr").addClass("active_tr");
   });
});

I have also tried using “.on” for the new elements that belong to the div with id=”quote” in the DOM: jQuery

$("#quote").on('click', '.quote_table td', function(){

Still doesn’t work. Seems everything I try (that I have found in previous questions) doesn’t work.

A little guidance would be greatly appreciated.

Thanks

$(document).ready(function() {
                    $("#button1").click(function(){
                        var f = 0;
                        var message = "";
                        var x = document.forms["quote_form1"]["state_select"].value;
                        var y = parseInt(document.forms["quote_form1"]["age_select"].value);
                        var z = document.forms["quote_form1"]["gender"].value;
                        if (x === null || x === "") {
                            message += "Please select the insured's state of residence.\n";
                            var f = f + 1;
                        }if (y === null || y === 0) {
                            message += "Please select the insured's current age.\n";
                            var f = f + 1;
                        }if (z === null || z === "") {
                            message += "Please indicate the insured's gender.\n";
                            var f = f + 1;
                        }if (f > 0){
                            alert(message);
                            return false;
                        }if (f === 0){
                            var request = $.ajax({
                                cashe: "true",
                                url: "quote_data.php",
                                type: "POST",
                                data: {
                                    state : x,
                                    age : y,
                                    gender : z
                                }
                            });
                            request.done( function(html){
                                $("#quote").html(html);
                                $(".quote-hidden").fadeIn(2000);
                                $( "#tabs" ).tabs( "option", "active", 4);
                            });
                        }
                    });
                    });

HTML:

<table class="quote_table" style="width: 95%">
    <tbody>
        <tr>
            <td class="col-titles" style="padding:0 10px 0 10px">&nbsp;</td>
            <td colspan="2" class="col-titles" style="padding:0 10px 0 10px">Monthly Cost</td>
        </tr>
        <tr style="margin-bottom: 20px">
            <td class="col-titles" style="padding:0 10px 0 10px">Protection Amount</td>
            <td class="col-titles" style="padding:0 10px 0 10px">Direct Billing</td>
            <td class="col-titles" style="padding:0 10px 0 10px">ACH Draft</td>
        </tr>
        <tr>
            <td><hr style="margin:4px 10px 10px 10px"></td>
            <td colspan="2"><hr style="margin:4px 10px 10px 10px"></td>
        </tr>

        <tr class="quote_tr">
            <td class="level_choice" style="text-align: center">
                <input class="level_choice" name="level" value="5000"                                  type="radio">&ensp;&ensp;&ensp;$5,000
            </td>
            <td style="text-align: center">$38.10</td>
            <td style="text-align: center">$34.93</td>
        </tr>
        <tr class="quote_tr">
            <td class="level_choice" style="text-align: center">
                <input class="level_choice" name="level" value="7000" type="radio">&ensp;&ensp;&ensp;$7,000
            </td>
            <td style="text-align: center">$53.34</td>
            <td style="text-align: center">$48.90</td>
        </tr>
        <tr class="quote_tr active_tr">
            <td class="level_choice" style="text-align: center">
                <input class="level_choice" name="level" value="10000" type="radio" checked="">&ensp;&ensp;$10,000
            </td>
            <td style="text-align: center">$76.20</td>
            <td style="text-align: center">$69.85</td>
         </tr>    
    </tbody>
</table>

Try calling your desired behaviour in the callback of your AJAX function — BravoZulu, Jul 31 '15 at 18:45
Your `on()` example looks like it should work, assuming your table actually has a CSS class of `quote_table`. BTW, you will require the delegated usage of `on()` as you have here, because you're binding event handlers to elements that will exist in the future. See [one of my other answers](http://stackoverflow.com/a/6658774/74757) for more details. — Cᴏʀʏ, Jul 31 '15 at 18:46
You have an error in your js code, there is a `}):` instead of `});` — MazzCris, Jul 31 '15 at 18:49
@Cory: I thought so too, but it doesn't work. Thought I might be missing something else conceptually. — user1028866, Jul 31 '15 at 18:52
Does #quote exist in the DOM on page load or is it also dynamically loaded into the page? — wrxsti, Jul 31 '15 at 18:54
@user1028866 But so, do you have element with class `quote_table` containing any TD element??? You have to provide minimalistic sample replicating issue or at least post all relevant HTML markup — A. Wolff, Jul 31 '15 at 18:54
You are also using `”` instead of `"` in your html class attributes — MazzCris, Jul 31 '15 at 18:55
@Mazz: sorry for the type-o's in my post. They are not in my program file. — user1028866, Jul 31 '15 at 18:57
@Wolff: yes the table element has class "quote_table". I only showed you the tr and td elements in my question. — user1028866, Jul 31 '15 at 18:59
@wrxsti: DOM has the #quote div element. That is what the ajax is filling in the tab. — user1028866, Jul 31 '15 at 19:00
Here is more complete copy of my file. Does this help? BTW the DOM only contains the div id quote container, not the content added by ajax - for those of you who asked. — user1028866, Jul 31 '15 at 19:21
@everyone: I appreciate all your help. Posting parts of a large file that has confidential material required me to retype parts of my code. I apologize for my type-O's. I did a lot of research before posting this question and tried numerous times to fix this myself. Cory's first answer caused me to recheck his first advice. I must have had the class wrong when I tried this before posting my question! Thanks Cory. — user1028866, Jul 31 '15 at 19:41

score 0 · Answer 1 · answered Jul 31 '15 at 19:43

0

Rechecked class name on table. That fixed the problem. Thanks Cory!

answered Jul 31 '15 at 19:43

user1028866

795
2
8
19

Having trouble using jQuery selectors in ajax content of jQuery tabs

1 Answers1