无法“检查”动态创建的复选框jQuery

时间:2013-10-03 13:14:51

标签: dynamic checkbox jquery

我正在制作一个模态弹出窗口,我会动态添加一些数据,以及一些复选框。在某个部分有一个“选择所有”复选框的复选框,它可以正常工作,除非我选中“全选”复选框,除非我双击它,这实际上两次点击了点击功能。

$('#delAllSampleTwo').live('click',function(){
            $('.delAllSampleTwo').prop("checked", !$('.delAllSampleTwo').prop("checked"));
            $('.delTwo').prop("checked", !$('.delTwo').prop("checked"));
        });

.delTwo类代码正常工作。但不是delAllSampleTwo,是的,它们的ID和类是相同的,我尝试使用id或只是类,但无法让它正常工作。

这是从JQuery代码返回的HTML字符串;

    <table style=\'width: 685px;\' cellpadding=\'0\' cellspacing=\'0\'>
    <tr>
        <td style=\'width:20px;\'><a href=\'#\' class=\'toggleReportTwo\'></a></td>
        <td style=\'width:315px; text-align:left; font-weight:bold;\'>Sample Report Two</td>
        <td style=\'font-weight:bold; width:140px; text-align:right;\'>10/3/2013,9:52:40 AM</td>
        <td style=\'font-weight:bold; width:150px; text-align:left; padding-left:6px;\'>
            <a href=\'#\' class=\'viewIndReports\'>View All in One PDF</a>
        </td>
        <td style=\'width:70px;\'>
            <input type=\'checkbox\' id=\'delAllSampleTwo\' class=\'delAllSampleTwo\'/>All
        </td>
    </tr>
</table>
<div id=\'sampleTwoReports\'>
    <table style=\'width: 685px;\' cellpadding=\'0\' cellspacing=\'0\'>
        <tr>
            <td style=\'width:20px;\'></td>
            <td style=\'width:315px; text-align:left;\'>CHIN KIM</td>
            <td style=\'width: 140px; text-align:right; padding-right:4px;\'>&nbsp;</td>
            <td style=\'width:150px; text-align:left; padding-left:6px;\'>
                <a class=\'viewIndReports\' href=\'#\' target=\'_blank\'>View</a>
            </td>
            <td style=\'width:70px;\'>
                <input type=\'checkbox\' id=\'delCHIN KIM\' class=\'delTwo\'/>
            </td>
        </tr>
    </table>
</div>

1 个答案:

答案 0 :(得分:0)

我明白了,这就是我最终做的事情。首先,我读了一些关于什么时候动态添加元素到一个模态的帖子,而不是z-index可能会被抛弃去除功能所以我将模态z-index设置为99999并重写该函数;

$('.delAllSampleTwo').live('click',function(){
                if($(this).is(":checked")){
                    $('.delTwo').prop("checked",true);
                }else{
                    $('.delTwo').prop("checked",false);
                }

完美地完成了这个技巧。