1

I am making a modal popup and i dynamically add some data to it, along with a couple checkboxes. There is a checkbox that "Selects All" checkboxes in a certain section, which works alright, except for the fact that the "Select All" checkbox doesn't get checked off unless I double click it, which essentially envokes the click function twice. 

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

the .delTwo class code works correctly. but not the delAllSampleTwo, and yes the ID and Class of them are the same, i tried with just id or just class but couldn't get it to work correctly.

Here is the HTML string being returned from the JQuery code;

    <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>
4

1 回答 1

0

I figured it out, here is what i ended up doing. Firstly, i read some posts about when dynamically adding elements to a modal than the z-index might be thrown off taking away functionality so i set the modal z-index to 99999 and rewrote the function to be;

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

does the trick perfectly.

于 2013-10-03T15:16:04.337 回答