jQuery事件没有绑定到php循环创建的元素

Question

I have a form like the one shown below, where after a submit occurs php reloads all the posted values back into the page, but still allows the selection of new rows beneath the reloaded rows.

<script>
$(document).ready(function(){
$(document.body).on('change','.item', function(){
//set cboType options by ajax
//do stuff
});
});
</script>
.....
<table>
<?php
    for($nIndex = 0; $nIndex < count($m_arrItemsList) - 1;$nIndex++)
    {
?>
    <tr>
        <td>
            <select class="item" name="cboItem[]">
<?php
        foreach($m_arrItemsList as $key => $value)
        {
             $strSelect ='';
             if($_POST['cboItem'][$nIndex] == $value['ItemID_PK'])
                 $strSelect = ' selected="selected"';
?>
                <option value="<?=$value['ItemID_PK']?>" <?=$strSelect?>><?=$value['ItemName']?></option>
<?php
        }
?>
            </select>
        </td>
        <td>
            <select class="type" name="cboType[]">
<?php
        foreach($m_arrTypeList as $key => $value)
        {
             $strSelect ='';
             if($_POST['cboType'][$nIndex] == $value['ItemID_PK'])
                 $strSelect = ' selected="selected"';
?>
                <option value="<?=$value['ItemID_PK']?>" <?=$strSelect?>><?=$value['ItemName']?></option>
<?php
        }
    }
?>
            </select>
        </td>
        <td>
            <input type="text" name="txtRate[]" class="rate" value="<?=$_POST['txtRate'][$nIndex]?>">
        </td>
    </tr>
<?php
}
?>
    <tr>
        <td>
            <select class="item" name="cboItem[]">
<?php
    foreach($m_arrItemsList as $key => $value)
    {
?>
                <option value="<?=$value['ItemID_PK']?>" <?=$strSelect?>><?=$value['ItemName']?></option>
<?php
    }
?>
            </select>
        </td>
        <td>
            <select class="type" name="cboType[]">
<?php
    foreach($m_arrTypeList as $key => $value)
    {
?>
                <option value="<?=$value['ItemID_PK']?>" <?=$strSelect?> disabled="disabled"><?=$value['ItemName']?></option>
<?php
    }
?>
            </select>
        </td>
        <td>
            <input type="text" name="txtRate[]" class="rate" value="0">
        </td>
    </tr>
</table>
<button type="submit" name="cmdSave" value="Save">

My issue is that the jquery function after submission does not run for the rows created in the php for loop; however it does work perfectly before submission.

There are also no errors in my javascript console, before or after submission, and the jquery function does run for the not POSTed cboItem after the php loop after submission and the drop downs that are created by said function.

Does anyone have any ideas on how to fix this problem? Any help is appreciated.

Answer 1

If you're creating the html by php, which means the code is being written and loaded and finished when you call $(document).ready(), you shouldn't have to write you're event handler like that.

Did you try

$('.item').on('change', function(){});

Also, I'm sure you've done this but I like to put lots of console.logs in my javascript when I don't see any effect. I'd put on just after the .ready(), to see if the javascript is triggering when the page is ready, and another one inside the event handler function, to see if it's the code inside the event handler that's failing to have an effect.