Question

我有一个动态表单，它将通过运行mysql查询填充，更好的方式我有一个从mysql填充的动态表。我在click事件上为每一行创建了一个按钮，以便获取该行的id并能够将用户发送到第二页以编辑该行信息，但是我检查这个多个按钮时遇到问题，如果是复选框则更容易。

这是我点击事件的jquery：

<script>

    $(document).ready(function() {

        var changeColor = function() {

        $('input[name=ans]').next().css('color', 'black');

        $('input[name=ans]').each(function(){
            _this = $(this);

            if(_this.is(':checked') == true) {
                _this.next().css('color', 'green');
            }

         });
     }

     $('#changeColor').click(function(){

      changeColor();

     });

    });

</script>

    <input type='radio' name='ans' value='0'> <span>Dog</span>
    <input type='radio' name='ans' value='1'> <span>Horse</span>
    <input type='radio' name='ans' value='2'> <span>Cat</span>
    <input type='radio' name='ans' value='3'> <span>Camel</span>

    <input type="button" value="Change Color" id="changeColor" />

这是由php和mysql创建的动态部分：

  var user_list = [];
        $('.sec_uid').each(function(i){
            user_list[i] = $(this).val();
            alert(user_list[i]);
            $(this).on('click',function () {
                var vsec_uid = $('#result_table').find('[name=sec_uid]').val();
                alert(vsec_uid);
            });
        });

这是html部分：

while ($users_row = mysqli_fetch_assoc($sec_users)) {
    echo "<tr>
          <td><input id='sec_user_id' name='sec_uid[]' class='sec_uid' type='hidden' value='".$users_row['id']."'/></td>
           <td>
              <input name = 'session_order' value = '" . $users_row['name'] . " " . $users_row['lastname'] . " : " . $users_row['user_role'] . "' />
            </td>
            <td>
                <button id = 'Edit_sec_user' name='edit_secUser[]' class='btn btn-default'>Edit User</button>
             </td>
              <td>"; if(isset($users_row['sign_file']) && $users_row['sign_file']!=''){ echo"<a href='" . $users_row['sign_file'] . "' target='_blank'><button type='button' class='styled_button_radius' name='sign_file'>view file</button></a>";}
            echo "</td>
            </tr>";
 }

Answer 1

在按钮上添加另一个类名editBtn以便稍后引用它：

while ($users_row = mysqli_fetch_assoc($sec_users)) {
echo "<tr>
      <td><input id='sec_user_id' name='sec_uid[]' class='sec_uid' type='hidden' value='".$users_row['id']."'/></td>
       <td>
          <input name = 'session_order' value = '" . $users_row['name'] . " " . $users_row['lastname'] . " : " . $users_row['user_role'] . "' />
        </td>
        <td>                
            <button id = 'Edit_sec_user' name='edit_secUser[]' class='btn btn-default editBtn'>Edit User</button>
            <!-- --------------------------------------------------------------------- ^ HERE -->
         </td>
          <td>"; if(isset($users_row['sign_file']) && $users_row['sign_file']!=''){ echo"<a href='" . $users_row['sign_file'] . "' target='_blank'><button type='button' class='styled_button_radius' name='sign_file'>view file</button></a>";}
        echo "</td>
        </tr>";
}

和jQuery部分一样，需要稍微调整一下：

// use event delegation for dynamic content
$('#result_table').on('click','.editBtn', function () {
    // get current ID($users_row['id']) for
    // particular row
    var vsec_uid = $(this).closest('tr').find('.sec_uid').val();
    alert(vsec_uid);       
});

使用jquery为多个动态元素设置click事件

1 个答案: