如何在 Jquery 中获取 ID 动态？答案

【问题标题】：How to get ID dynamic in Jquery?如何在 Jquery 中获取 ID 动态？
【发布时间】：2020-02-18 04:01:25
【问题描述】：

我在做动态输入，当用户点击“Add From Checklist”会有一个输入表单，如果再次点击“Add From Checklist”那么输入表单就变成了两个，以此类推，对于实际的选择代码，已经有数据如 '1-022020-001'，现在用于输入站和设备，数据是数据库中值'1-022020-001'的位置，现在我' m 仍然对如何将值 '1-022020-001' 的结果发送到控制器并返回给 js 以显示输入的 Station and Equipment 的结果感到困惑。

演示：

var html = '';
    $('.btnSend').attr('disabled', true);

    $("#inputCode, #inputStasiun, #inputPeralatan").select2({
        placeholder: "Choose one",
        allowClear: true
    });

    var runNumberAdd = 1;
    $("#add-more").click(function() {
        html =
        '<div class="col-sm-6 control-group">'+
            '<div class="panel panel-default" style="padding: 10px;">'+
                '<div class="form-horizontal">'+
                    '<div class="form-group">'+
                        '<label class="col-sm-2 control-label">Tanggal</label>'+
                        '<div class="col-sm-10">'+
                            '<input name="inputTgl[]" type="date" id="inputTglClone'+ runNumberAdd +'" class="form-control inputTglClone">'+
                        '</div>'+
                    '</div>'+
                    '<div class="form-group">'+
                        '<label class="col-sm-2 control-label">Code</label>'+
                        '<div class="col-sm-10">'+
                            '<select name="inputCode[]" id="inputCodeClone'+ runNumberAdd +'" class="form-control select2 inputCodeClone">'+
                            '</select>'+
                        '</div>'+
                    '</div>'+
                    '<div class="form-group">'+
                        '<label class="col-sm-2 control-label">Stasiun</label>'+
                        '<div class="col-sm-10">'+
                            '<select name="inputStasiun[]" id="inputStasiunClone'+ runNumberAdd +'" class="form-control select2 inputStasiunClone">'+
                            '</select>'+
                            '<input name="inputStasiunHidden[]" type="text" id="inputStasiunHiddenClone'+ runNumberAdd +'" class="form-control inputStasiunHiddenClone">'+
                        '</div>'+
                    '</div>'+
                    '<div class="form-group">'+
                        '<label class="col-sm-2 control-label">Peralatan</label>'+
                        '<div class="col-sm-10">'+
                            '<select name="inputPeralatan[]" id="inputPeralatanClone'+ runNumberAdd +'" class="form-control select2 inputPeralatanClone">'+
                            '</select>'+
                        '</div>'+
                    '</div>'+
                    '<div class="form-group">'+
                        '<label class="col-sm-2 control-label">Deskripsi</label>'+
                        '<div class="col-sm-10">'+
                            '<textarea name="inputDeskripsi[]" id="inputDeskripsiClone'+ runNumberAdd +'" class="form-control inputDeskripsiClone"></textarea>'+
                        '</div>'+
                    '</div>'+
                    '<div class="form-group">'+
                        '<label class="col-sm-2 control-label">Resume</label>'+
                        '<div class="col-sm-10">'+
                            '<label class="radio-inline">'+
                                '<input type="radio" name="inputChecklist[]" id="inputChecklist1Clone'+ runNumberAdd +'" class="inputChecklist1Clone'+ runNumberAdd +'" value="1"> OK'+
                            '</label>'+
                            '<label class="radio-inline">'+
                                '<input type="radio" name="inputChecklist[]" id="inputChecklist2Clone'+ runNumberAdd +'" class="inputChecklist2Clone'+ runNumberAdd +'" value="0"> NOK'+
                            '</label>'+
                            '<div class="pull-right">'+
                                '<button type="button" class="btn btn-danger btn-sm remove_list"> Hapus From Checklist</button>'+
                            '</div>'+
                        '</div>'+
                    '</div>'+
                '</div>'+
            '</div>'+
        '</div>';
        $('.clone-form').append(html);
        $(".inputCodeClone, .inputStasiunClone, .inputPeralatanClone").select2({
            placeholder: "Choose one",
            allowClear: true
        });
        $.ajax({
            url   : 'showDataCode',
            dataType : 'JSON',
            async : true,
            success : function(data) {
                var minrunNumberAdd = runNumberAdd - 1;
                var attrCode = '#inputCodeClone' + minrunNumberAdd;
                $(attrCode).append($("<option selected disabled></option>").attr("value", '').text('')); 
                $.each(data, function(key, value) {   
                    $(attrCode).append($("<option></option>").attr("value", value.id).text(value.code)); 
                });
            }
        });
        $('.btnSend').attr('disabled', false);
        $('.inputStasiunClone').attr("disabled", true);
        $('.inputPeralatanClone').attr("disabled", true);
        runNumberAdd++;
    });
    
    $("body").on("click", ".remove_list",function() {
        var numItems = $('.control-group').length;
        $(this).parents(".control-group").remove();
        if (numItems == 1) {
            $('.btnSend').attr('disabled', true);
        } else {
            $('.btnSend').attr('disabled', false);
        }
    });
    
    
    
    
    // How to get attribut ID
    // My Xample
    $('input[id^="inputCodeClone"]').on('click', function() { 
        alert('A');
    });

<link href="https://cdn.jsdelivr.net/npm/select2@4.0.13/dist/css/select2.min.css" rel="stylesheet"/>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/select2@4.0.13/dist/js/select2.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>

<div class="box-header">
                    <div class="pull-right">
                        <button type="button"  id="add-more" class="btn btn-success btn-sm"> Tambah From Checklist</button>
                    </div>
                </div>
                <form action="<?= base_url('GeneralFormChecklist/submitChecklist'); ?>" method="post" id="formInput">
                    <div class="box-body">
                        <div class="clone-form">
                        </div>
                    </div>
                    <div class="box-footer">
                        <div class="pull-right">
                            <button type="submit" class="btn btn-primary btn-sm btnSend">Kirim Checklist</button>
                        </div>
                    </div>
                </form>

数据库中的样本数据

问题是：

如何通过选择code as where in the database later，在输入站显示id_location，在输入设备中显示id_equipment_name？

注意： 我在查找动态 ID 时卡住的代码

【问题讨论】：

$('input[id^="inputCodeClone"]').on('click', function(e,value) { //这里获取选中选项value的值 });
@LDS 没有任何反应，即使您已被指示发出警报，但选择器中可能存在错误，我不确定

标签： javascript php jquery codeigniter

【解决方案1】：

如果您想获取您单击的当前输入或所有最近输入的值，则可以使用 $(this)。它可以帮助您指向当前焦点或点击的元素。

【讨论】：

是的，我知道，但是如果您点击输入，即使您被指示显示警报，也不会发生任何事情
选择器有问题吗？ @Harsimranjit Singh
我建议你尝试使用类选择器，然后提醒 $(this).val() 或提供一个 JS fiddle 或任何其他代码 sn-p
jsfiddle.net/473ehusm/1也许你可以试试@Harsimranjit Singh
@AdyShaputra 您正在初始化您的选择元素上的 select2，这就是为什么您无法跟踪任何点击，因为 select2 禁用了它。 $('.inputCodeClone').on('select2:select', function (e) { // 做一些事情 alert('A'); });

【解决方案2】：

我只是尝试添加一些字段。你修改

<html>
<head>
<link href="https://cdn.jsdelivr.net/npm/select2@4.0.13/dist/css/select2.min.css" rel="stylesheet"/>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/select2@4.0.13/dist/js/select2.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="box-header">
                    <div class="pull-right">
                        <button type="button"  id="add-more" class="btn btn-success btn-sm"> Tambah From Checklist</button>
                    </div>
                </div>
                <form action="<?= base_url('GeneralFormChecklist/submitChecklist'); ?>" method="post" id="formInput">
                    <div class="box-body">
                        <div class="clone-form">
                        </div>
                    </div>
                    <div class="box-footer">
                        <div class="pull-right">
                            <button type="submit" class="btn btn-primary btn-sm btnSend">Kirim Checklist</button>
                        </div>
                    </div>
                </form>
<script>
$(document).ready(function(){

var html = '';


    $('.btnSend').attr('disabled', true);

    $("#inputCode, #inputStasiun, #inputPeralatan").select2({
        placeholder: "Choose one",
        allowClear: true
    });

    var runNumberAdd = 1;
    $("#add-more").click(function() {
	html =  $('<div/>', {
        'class': 'col-sm-6 control-group'
    });
	var firstchild =  $('<div/>', {
        'class': 'form-group'
    });
   var	lable1 =  $('<label/>', {
        'class': 'col-sm-2 control-label',
	text: 'Tanggal',
	id: 'lbl1'
    }).on('click',function(){
	alert("First lable");
});
var innerchild =  $('<div/>', {
        'class': 'col-sm-10'
	
    });
var firstinput =  $('<input/>', {
        'class': 'form-control inputTglClone',
	id: 'inputTglClone'+ runNumberAdd,
	type: 'date' 
    });
innerchild.append(firstinput);
firstchild.append(lable1);
firstchild.append(innerchild);

	html.append(firstchild);
	
	 var lable2 =  $('<label/>', {
        'class': 'col-sm-2 control-label',
	text: 'Code',
	id: 'lbl2'
    }).on('click',function(){
	alert("First lable");
});
	runNumberAdd = 2;
        var firstselectinput =  $('<select/>', {
        'class': 'form-control select2 inputCodeClone',
	id: 'inputTglClone_select',
	
    });
var innerchild1 =  $('<div/>', {
        'class': 'col-sm-10'
	
    });
var secondchild =  $('<div/>', {
        'class': 'form-group'
    });
	innerchild1.append(firstselectinput);
	secondchild.append(lable2);
	secondchild.append(innerchild1);
	html.append(secondchild);  
        $('.clone-form').html(html);
        $(".inputCodeClone, .inputStasiunClone, .inputPeralatanClone").select2({
            placeholder: "Choose two",
            allowClear: true,
	    data:[{id:'1',text:'one'},{id:'2',text:'two'}],
	createTag: function (params) {
    		var term = $.trim(params.term);
    		if (term === '') {
      		return null;
    		}
    		return {id: term,text: term}
      
		}
        }).on("change", function (e) {
	var selectedvalue = e.currentTarget.selectedOptions[0].value;
	alert(selectedvalue);
	
});
       
        $('.btnSend').attr('disabled', false);
        $('.inputStasiunClone').attr("disabled", true);
        $('.inputPeralatanClone').attr("disabled", true);
        runNumberAdd++;
    });
   
    $("body").on("click", ".remove_list",function() {
        var numItems = $('.control-group').length;
        $(this).parents(".control-group").remove();
        if (numItems == 1) {
            $('.btnSend').attr('disabled', true);
        } else {
            $('.btnSend').attr('disabled', false);
        }
    });
    
  
   
   
 
});
</script
</body>

【讨论】：