Question

我已经为静态ID编写了ajax。我想将其转换为动态ID，但我不知道如何转换。

这里的id是textbox1，我将textbox1转换为textbox10，将rate1转换为rate10，它是动态生成的。那怎么办呢？

 $(document).on('change','#textbox1',function () {
        var prod_id=$(this).val();
        var a=$(this).parent();
        console.log(prod_id);
        var op="";
        $.ajax({
            type:'get',
            url:'{!!URL::to('search')!!}',
            data:{'id':prod_id},
            dataType:'json',//return data will be json
            success:function(data){
                console.log("price");
                console.log(data.rate);
                    // here price is column name in products table data.coln name
                a.find('#rate1').val(data.rate);
            },
            error:function(){}
        });
    });

Answer 1

使用类代替id

生成具有类属性的动态文本框

<input type="text" name="prod_id" class="_my_textbox">

在js代码中：

$(document).on('change', '._my_textbox' ,function () {
        var prod_id=$(this).val();
        var a=$(this).parent();
        console.log(prod_id);
        var op="";
        $.ajax({
            type:'get',
            url:'{!!URL::to('search')!!}',
            data:{'id':prod_id},
            dataType:'json',//return data will be json
            success:function(data){
                console.log("price");
                console.log(data.rate);
                    // here price is column name in products table data.coln name
                a.find('#rate1').val(data.rate);
            },
            error:function(){}
        });
    });

Answer 2

由于使用的是select元素，因此可以使用onchange属性并将带有ID的函数赋值给它，这样便可以在js中使用它了。动态ID必须来自这样的PHP脚本：

$stmt = $DBcon->prepare("SELECT txtbx_id, role_id FROM your_table WHERE you_conditions_if_u_have_any");
$stmt->execute();
$row = $stmt->fetchAll();
foreach ($row as $rows) {
    $txtbx_id= $rows['txtbx_id'];
    $role_id= $rows['role_id'];
    echo  '

    <div class="card">
       <select onchange="yourfunction('.$txtbx_id.', '.$role_id.')" >
          ....
       </select>
    </div> 
    ';
}

然后在您的js中，而不是在文档更改时，将具有id的函数用作变量，如下所示：

function yourfunction(textbox_id, role_id){
   // use the ids which are affected in here
   var prod_id=$(this).val();
   var a=$(this).parent();
   console.log(prod_id);
   var op="";
   $.ajax({
       type:'get',
       url:'{!!URL::to('search')!!}',
       data:{'id':prod_id},
       dataType:'json',//return data will be json
       success:function(data){
           console.log("price");
           console.log(data.rate);
              // here price is column name in products table data.coln name
           a.find('#rate1').val(data.rate);
       },
       error:function(){}
   });
});

如何使用动态ID制作多个Ajax触发器

2 个答案: