Question

这是我的HTML代码： http://jsfiddle.net/Udxyb/406/

<div id="polls" style=" border: 1px solid #ccc;">


<table id="main_table" style="width: 1002px; border: 1px solid #ccc;">

    <tbody>
        <tr style="background-color:green; color:white">
            <td  colspan="" class="flip"> Section 1</td>
            <td  colspan="" class="flip"> Section 2 </td>
            <td  colspan="" class="flip"> Section 3 </td>
            <td  colspan="" class="flip"> Section 4 </td>
        </tr>
    </tbody>
    <tbody class="section">
        <tr>
            <td>item 111</td>
            <td>item 112</td>
            <td>item 113</td>
            <td>item 114</td>
        </tr>
        <tr>
            <td>item 121</td>
            <td>item 122</td>
            <td>item 123</td>
            <td>item 124</td>
        </tr>
        <tr>
            <td>item 131</td>
            <td>item 132</td>
            <td>item 133</td>
            <td>item 134</td>
        </tr>
    </tbody>
    <tbody>
        <tr style="background-color:green; color:white">
           <td  colspan="" class="flip"> Section 1 </td>
            <td  colspan="" class="flip"> Section 2 </td>
            <td  colspan="" class="flip"> Section 3 </td>
            <td  colspan="" class="flip"> Section 4 </td>
        </tr>
    </tbody>
    <tbody class="section">
        <tr>
            <td>item 211</td>
            <td>item 212</td>
            <td>item 213</td>
            <td>item 214</td>
        </tr>
        <tr>
            <td>item 221</td>
            <td>item 222</td>
            <td>item 223</td>
            <td>item 224</td>
        </tr>
        <tr>
            <td>item 231</td>
            <td>item 232</td>
            <td>item 233</td>
            <td>item 234</td>
        </tr>
    </tbody>
    <tbody>
        <tr style="background-color:green; color:white">
            <td  colspan="" class="flip"> Section 1 </td>
            <td  colspan="" class="flip"> Section 2 </td>
            <td  colspan="" class="flip"> Section 3 </td>
            <td  colspan="" class="flip"> Section 4 </td>
        </tr>
    </tbody>
    <tbody class="section">
        <tr>
            <td>item 311</td>
            <td>item 312</td>
            <td>item 313</td>
            <td>item 314</td>
        </tr>
        <tr>
            <td>item 321</td>
            <td>item 322</td>
            <td>item 323</td>
            <td>item 324</td>
        </tr>
        <tr>
            <td>item 331</td>
            <td>item 332</td>
            <td>item 333</td>
            <td>item 334</td>
        </tr>
    </tbody>
</table>


</div>

jquery代码：

<script type="text/javascript">
$(window).load(function(){
$('.flip').click(function() {
    $(this)
        .closest('tbody')
        .next('.section')
        .toggle('fast');
});
});

</script>

但是当我使用ajax和jdbc从java类中获取相同的代码时，我无法获得jquery效果。我在这做什么错误???

Answer 1

这对你来说应该没问题

$(document).ready(function() {
  alert("DOM is ready");
});

作为快捷方式，您可以使用

$(function() {
  alert("DOM is ready");
});

在运行上述代码之前确保jQuery包含在您的页面中（例如，）

<script src="jquery.js"></script>
<script>
  $(function() {
    alert("DOM is ready");
  });
</script>

Answer 2

尝试准备好文档 http://learn.jquery.com/using-jquery-core/document-ready/

<script type="text/javascript">
$(document).ready(function(){
$('.flip').click(function() {
    $(this)
        .closest('tbody')
        .next('.section')
        .toggle('fast');
});
});

</script>

如果你的html是在AJAX请求之后加载的，请尝试使用$（document）.on https://api.jquery.com/on/

<script type="text/javascript">

function onFlipClick(event){
    $(this)
        .closest('tbody')
        .next('.section')
        .toggle('fast');
}
$(document).ready(function(){
    $(document).on('click', '.flip', onFlipClick);
});

</script>

Answer 3

由于您正在使用ajax加载页面内容，因此您尝试将事件处理程序附加到当时页面上不存在的元素。请改用它......

jQuery(function($) {
    $("document").on("click", ".flip", function() {
        $(this)
            .closest('tbody')
            .next('.section')
            .toggle('fast');
    });
});

jQuery(function($) { })只是处理文档就绪事件的另一种方式。如果您有理由使用它，可以将其换成$(window).load()。

此外，交换$("document")作为容器元素的选择器。在你的代码中你有一个带有.content类的div，所以我建议使用它，但我不确定你加载内容的位置或者是否是内容的一部分。您需要指定当时页面上的父/祖父母等元素。

Answer 4

尝试以下代码，请在通过AJAX设置值后输入此代码

$(".flip").on("click", function() {
        $(this)
            .closest('tbody')
            .next('.section')
            .toggle('fast');
    });

$（window）.load（function（）没有被执行？

4 个答案: