如何获取已动态给出 ID 的元素的 ID？答案

【问题标题】：How to grab ID of element which ID has been dynamically given?如何获取已动态给出 ID 的元素的 ID？
【发布时间】：2019-03-18 07:45:06
【问题描述】：

当复选框被选中时，我试图做一个简单的显示，但我无法获取元素，因为元素的 ID 是由 PHP 动态分配的。

该元素将在一个 foreach 循环中，因此会有多个具有动态给定 ID 的实例。

示例：

//Laravel blade template
<element id="attrb{{ $elem->id }}> "></element>

//Javascript
if ($("#attrb*ID").is(":checked")) {
    $("#attrbs-container").show();
} else {
    $("#attrbs-container").hide();
}

【问题讨论】：

看起来您正在使用jQuery，所以也许您想研究使用他们的.on() 函数来绑定动态元素上的事件。 jQuery .on() Documentation

标签： javascript php laravel laravel-blade

【解决方案1】：

使用 Jquery

$('input[id^="attrb"]').change(function(e){
     
    if($(this).is(':checked'))  console.log($(this).prop('id'));

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<input type="checkbox" id="attrb1" value="1" />

运行，然后选中该框。您可以将console.log 替换为您的.show 或其他任何内容。

选择器input[id^="attrb"] 表示input 和id，^= 以attrb 开头。如果这些是您仅有的复选框，您也可以使用 input[type="checkbox"]，但它不太具体。

更改与点击

change 在元素的数据（状态）更改时触发。 click 将在您单击时触发。在这种情况下，您使用哪个可能并不重要。 change 与 click 的一个更好的例子是使用单选按钮，然后单击已选中的单选。选中时取消单击复选框，单选按钮没有那么多。我只是习惯于使用change 而不是click 进行状态更改。

$('input[id^="attrb"]').click(function(e){
     
    if($(this).is(':checked'))  console.log($(this).prop('id'));

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<input type="radio" id="attrb1" value="1" />

运行并单击收音机 2x。它会触发 2 次。

$('input[id^="attrb"]').change(function(e){
     
    if($(this).is(':checked'))  console.log($(this).prop('id'));

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<input type="radio" id="attrb1" value="1" />

在这里做同样的事情，但要有所改变。这就是区别。

动态与动态

我的意思是DYNAMIC 是在客户端运行时发生变化的东西，Dynamic 是静态 HTML，其中 ID 仅在服务器端发生变化。对于DYNAMIC，您想像这样使用on

 $(someparent).on('change', 'input[id^="attrb"]', function(e){ ... });

其中someparent 是一个在运行时不会更改的静态元素。这将使用事件委托和“冒泡”来查找在客户端更改的内容。

我认为您的意思不是 DYNAMIC，但我将其包括在内以防万一。

干杯！

【讨论】：

【解决方案2】：

如果您使用 javascript 分配 id（在 ajax 请求之后），您可以创建一个带有回调的函数

function addID(add, callback)

然后使用函数：

addId(function(){
    //dynamically add ID
}, function(){
    // callback function
    if ($(“#attrb*ID”).is(":checked")) {
        $(“#attrbs-container").show();
    } else {
        $(“#attrbs-container").hide();
    }
})

【讨论】：