Question

我想找到输入控件的ID。这是HTML代码。

<div id="product">
    <div class="inputHolderOrder">
        <p style="margin-bottom: 2px;">Product Name</p>

        <input type="text" id="pro_data_0" class="inputRight pro input_wid" name="product_name[]" style="" onkeyup="productSearch('1');" >

        <div id="idProduct_0" class="proSea" style="position: absolute;z-index: 111111111111;background: #fff;">       

        </div>                         
    </div>

此处id将在foreach循环中动态生成。 ID将像 “ pro_data_0，pro_data_1，pro_data_2，pro_data_3”。

这是我的Javascript代码。

function productSearch(pagev){
    $("#product").find("input").on('input', function () {
        var idname = $(this).attr('id');
        console.log(idname);
        var input_data = $('#'+idname).val();
        console.log(input_data);
    });
}

第一次返回ID，但第二次不返回。

我使用.find('input')查找键入文字的控件。

Answer 1

由于您使用的是jQuery，因此可以简化代码，如下所示：-

HTML（无需执行onkeyup="productSearch('1');")：

<div id="product">
  <div class="inputHolderOrder">
    <p style="margin-bottom: 2px;">Product Name</p>

    <input type="text" id="pro_data_0" class="inputRight pro input_wid" name="product_name[]" style="">

    <div id="idProduct_0" class="proSea" style="position: absolute;z-index: 111111111111;background: #fff;">

    </div>
  </div>

jQuery：-

$(document).ready(function() {
  $('#product input[type=text]').keyup(function() {
    var idname = $(this).attr('id');
    console.log(idname);
    var input_data = $(this).val();
    console.log(input_data);
  })
});

输出：-{https://jsfiddle.net/y93ajrtm/和https://jsfiddle.net/7q9xu1eg/

注意：-确保在脚本代码之前添加了jQuery库

Answer 2

使用this参数更改onkeyup事件

onkeyup="productSearch('1', this);"

如下更改onkeyup功能

function productSearch(pagev, control){
        var idname = control.id;
        console.log(idname);
        var input_data = control.value;
        console.log(input_data);
}

这可能会有所帮助。

在onKeyup事件调用时查找控件的ID

2 个答案: