获取动态生成的 ID答案

【问题标题】：Getting a Dynamically generated ID获取动态生成的 ID
【发布时间】：2015-03-23 10:47:44
【问题描述】：

我有一个复选框，其中的值是从我的数据库中的数据动态填充的。我想根据单击的复选框执行进一步的查询，但是每当我单击任何复选框时，我似乎都无法检索 ID。我不想使用提交按钮。怎样才能做到这一点？？

我的代码。

function getDBlist() {
            global $link;
            $qry = ("SHOW DATABASES");
            $res = mysqli_query ( $link, $qry );
            while ( $row = mysqli_fetch_assoc ( $res ) ) {
                echo '<input type="checkbox" name="db" id="' . $row ['Database'] . '"   value="' . $row ['Database'] . '" />';
                echo $row ['Database'];
            }
        }
        getDBlist ();

我的脚本

$(document).on("change","checkbox", function() {
    var val = $(this).val();
    var id = this.id;
    alert(val, id);
});

当我点击任何复选框时，我不会收到包含值或 ID 的警报。我在这里做错了什么？难道是因为我动态生成的ID？

【问题讨论】：

替换这一行 var id = this.id; with var id = val.id;
$(".checkbox") 选择带有class="checkbox" 的任何元素... 要选择checkbox 元素请改用$("input[type='checkbox']")

标签： javascript php jquery checkbox

【解决方案1】：

要将更改事件绑定到动态生成的复选框，您需要委托change 事件，如下所示

$(document).on("change",".checkbox", function() {
    var val = $(this).val();
    var id = this.id;
    alert(val, id);
});

以上代码适用于现有的和动态创建的复选框。这里document 对象会将更改事件委托给class="checkbox" 的复选框

正如@Ghost 提到的，您需要将类添加到动态生成的复选框中，如下所示

echo '<input type="checkbox" 
             name="db" id="' . $row ['Database'] . '"   
             value="' . $row ['Database'] . '" 
             class="checkbox"/>';

More Information for .on()

【讨论】：

您是否将类属性添加到动态生成的复选框中，如我编辑的帖子中所示
非常感谢您的回复和示例。
嘿，我怎样才能发布一个或多个 ID（选择多个选项），以便我可以根据这些选择运行查询？如果我使用windows.location.assign，它会在每次点击时刷新页面。我试过这个$.post("index.php", { id: this.id, checked: this.checked }); 然后在我的php函数中使用$_POST 来检索ID，但我什么也没得到，有什么建议吗？
试试这个$.post("index.php", $('.checkbox:checked').attr('id'));
我刚刚在我的 php showTables() { if (isset ( $_POST ['id'] )) { $id = $_POST ['id']; echo $id; }else { echo "No ID Found"; } } 中使用以下函数进行了尝试，但即使我选择了一个复选框，我也会得到“未找到 ID”。

【解决方案2】：

查看您呈现标记的 echo 语句，您根本没有指定 class="checkbox"：

echo '<input type="checkbox" name="db" id="' . $row ['Database'] . '"   value="' . $row ['Database'] . '" />';

由于您尚未添加它，因此指向 $(".checkbox") 将不起作用。您需要将它们添加到 echo 中。

【讨论】：

【解决方案3】：

您的 jquery 选择器正在寻找具有 css 类“复选框”的元素，或者将此类添加到您的 html：

echo '<input type="checkbox" class="checkbox"...';

或删除选择器中的句点，以定位所有复选框元素：

$("checkbox").on("change", function() {
    var val = $(this).val();
    var id = this.id;
    alert(val, id);
});

【讨论】：

【解决方案4】：

试试这个

$("body").on("change",".checkbox", function() {
    var val = $(this).val();
    var id = $(this).attr("id");
    alert(val, id);
});

【讨论】：