自定义样式复选框不加载动态加载内容的样式

时间:2013-04-11 07:31:01

标签: jquery ajax checkbox

我正在使用http://boedesign.com/blog/2008/06/08/imagetick-for-jquery/来设置复选框的样式。我的div结构是这样的:

<table>
  <thead>
    <tr>
     <th>Check1</th>
     <th>Check2</th>
     <th>Name</th>
   </tr>
  </thead>

  <tbody>
  <tr>
     <td><input class="accept" type="checkbox" value="check_1" name="accept_1" id="accept1"></td>

     <td><input class="process" type="checkbox" value="check_2" name="process_1" id="process1"></td>
     <td>donald</td>
  </tr>
  </tbody>
  </table>

在我的jQuery中:

$(function() {
                  $("input[name='accept_1']").imageTick({
                        tick_image_path: { 
                            check_1: "/public/images/checkbox_full.png"
                            //"default": "images/gender/default_checked.jpg" //optional default can be used
                        },
                        no_tick_image_path: { 
                            check_1: "/public/images/checkbox_empty.png", 
                            //"default": "images/gender/default_unchecked.jpg" //optional default can be used
                        },
                        image_tick_class: "accept_1",
                    });
                });

            $(function() {
                   $("input[name='process_1']").imageTick({
                       tick_image_path: { 
                           check_1: "/public/images/checkbox_full.png"
                           //"default": "images/gender/default_checked.jpg" //optional default can be used
                       },
                       no_tick_image_path: { 
                           check_1: "/public/images/checkbox_empty.png", 
                           //"default": "images/gender/default_unchecked.jpg" //optional default can be used
                       },
                       image_tick_class: "process_1",
                   });
               });

我将通过.load()方法加载表的内容。但是复选框没有用图像设置样式。它仅在首次加载页面时显示图像。之后显示。我该如何解决这个问题?

1 个答案:

答案 0 :(得分:0)

您需要在.load函数回调中调用您的插件:

$('#your_item').load(title, function(){
    $("input[name='accept_1']").imageTick({
        tick_image_path: { check_1: "/public/images/checkbox_full.png"},
        no_tick_image_path: { check_1: "/public/images/checkbox_empty.png"},
        image_tick_class: "accept_1",
    });

    $("input[name='process_1']").imageTick({
        tick_image_path: { check_1: "/public/images/checkbox_full.png"},
        no_tick_image_path: { check_1: "/public/images/checkbox_empty.png"},
        image_tick_class: "process_1",
    });
});