Question

我有以下隐藏的jQuery选项卡： HTML

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

我正在动态填充“quote”div并使其可见： 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);
         });
       }):
     });

到目前为止一切顺利。问题是我似乎无法使用jQuery来选择任何新元素来执行操作。例如，在ajax加载的html中，我无法选择任何单选按钮单击以更改其所在行的背景颜色或删除当前“突出显示”的行背景颜色： 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");
   });
});

我还尝试在DOM中使用“.on”作为属于div的新元素，其中id =“quote”： jQuery的

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

仍然无效。似乎我尝试的一切（我在之前的问题中找到）都不起作用。

非常感谢一点指导。

由于

$(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>

Answer 1

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

在jQuery选项卡的ajax内容中使用jQuery选择器时遇到问题

1 个答案: