Javascript ajax如何在动态生成的div中工作_Javascript_Php_Jquery_Ajax

Javascript ajax如何在动态生成的div中工作

javascript php jquery ajax

Javascript ajax如何在动态生成的div中工作,javascript,php,jquery,ajax,Javascript,Php,Jquery,Ajax,我在做产品销售，在产品销售中，我使用AJAX根据从下拉列表到另一个下拉列表的选择来捕获数据。当我动态创建一个字段时，它只工作一次，我希望它工作N次以下是我的HTML和PHP代码： <div class="row col-md-12 mrg-top-20"> <h4 class="card-title" style="color:#ff0033">Sales Details</h4><br> <div class="col

我在做产品销售，在产品销售中，我使用AJAX根据从下拉列表到另一个下拉列表的选择来捕获数据。当我动态创建一个字段时，它只工作一次，我希望它工作N次

以下是我的HTML和PHP代码：

    <div class="row col-md-12 mrg-top-20">
<h4 class="card-title" style="color:#ff0033">Sales Details</h4><br>


    <div class="col-md-12"></div>
    <div class="row col-md-12" data-duplicate="add">

        <div class="col-md-4">
        <label>Select <strong>Installation Date</strong></label>
                <div class="form-group">
                    <div class="timepicker-input input-icon form-group">
                        <i class="ti-time"></i>
                        <input type="text" name="ins_date" class="form-control datepicker-1" placeholder="Datepicker" data-provide="datepicker">
                    </div>  
                </div>
        </div>
        <div class="col-md-4" id="sel_dynamic">
                <div class="form-group">
                <label>Select <strong>Manufacturer</strong></label>
                <select name="manu" id="manu" class="form-control" style="width:100%"> 
                    <option disabled="disabled" selected="selected">Select Manufacturer</option>
                    <?php
                        $data = mysqli_query($conn,"SELECT * FROM manufacturer_details");
                        while($itemcat = mysqli_fetch_array($data))
                        {
                    ?>
                    <option value="<?php echo $itemcat['MANUFACTURER_ID']; ?>"><?php echo $itemcat['MANUFACTURER_NAME'];?></option>
                    <?php
                        }
                    ?>
                </select>
                </div>
        </div>

        <div class="col-md-4">
            <div class="form-group">
                <label>Select <strong>Modal</strong></label>
                <select name="modal" id="modal" class="form-control" style="width:100%"> 
                    <option value="" selected disabled="disabled">Select Modal...</option>

                </select>
            </div>
        </div>

        <div class="col-md-4">  
            <div class="form-group">
                <label>Ser<strong>ial</strong></label>
                <input type="text" name="serial" placeholder="Enter Serial No" class="form-control">
            </div>
        </div>


        <div class="col-md-4">
            <label>Select <strong>AMC Start Date</strong></label>
            <div class="form-group">
                <div class="timepicker-input input-icon form-group">
                    <i class="ti-time"></i>
                    <input type="text" name="amc_date" class="form-control datepicker-1" placeholder="Datepicker" data-provide="datepicker" data-date-format="mm/dd/yyyy">
                </div>  
            </div>
        </div>


        <div class="col-md-4">
            <label>Select <strong>AMC End Date</strong></label>
            <div class="form-group">
                <div class="timepicker-input input-icon form-group">
                    <i class="ti-time"></i>
                    <input type="text" name="amc_edate" class="form-control datepicker-1" placeholder="Datepicker" data-provide="datepicker" data-date-format="mm/dd/yyyy">
                </div>  
            </div>
        </div>  

    </div>  

    <div>
        <input type="button" id="add" data-duplicate-add="add" class="btn btn-info" value="+"/>
    </div>
    <div >
        <input type="button"  data-duplicate-remove="add" class="btn btn-info" value="-"/>
    </div>
</div>


销售详情

选择安装日期
选择制造商
选择制造商
选择模态
选择模态。。。
Serial
选择AMC开始日期
选择AMC结束日期

下面是我每次调用Ajax的Js脚本

<script type="text/javascript">
    $(document).ready(function()
    {
        $("#sel_dynamic").on("change","#manu",(function() //just try to use on change
        {
            var id = $("#manu").val();
            var dataString = 'id='+ id;
            $.ajax
            ({
                type: "POST",
                url: "ajax_modal.php",
                data: dataString,
                cache: false,
                success: function(html)
                {
                    $("#modal").html(html);
                } 
            });
        });
    });
</script>


$（文档）.ready（函数（）
{
$（“#sel_dynamic”）。在（“更改”、“手动”、“函数（）//只需尝试在更改时使用
{
var id=$（“#manu”）.val（）；
var dataString='id='+id；
$.ajax
({
类型：“POST”，
url:“ajax_modal.php”，
数据：dataString，
cache:false，
成功：函数（html）
{
$（“#modal”）.html（html）；
} 
});
});
});

这是我的Ajax文件

    <?php
include('script/db.php');
if($_POST['id'])
{
    $id=$_POST['id'];
    $sql=mysqli_query($conn,"select * from modal_details where MANUFACTURER_ID='".$id."'");
?>

    <option selected disabled="disabled">Select Modal Name</option>
<?php
    while($row = mysqli_fetch_assoc($sql))
    {
        $id = $row['MODAL_ID'];
        $data = $row['MODAL_NAME'];
        echo '<option value="'.$id.'">'.$data.'</option>';
    }
}
?>

试试这个：
$（文档）.ready（函数（）
{
$（文档）.on（'change'，'#manu'，function（）
{
var id=$（“#manu”）.val（）；
var dataString='id='+id；
$.ajax
({
类型：“POST”，
url:“ajax_modal.php”，
数据：dataString，
cache:false，
成功：函数（html）
{
$（“#modal”）.html（html）；
} 
});
});
});
试试这个：
$（文档）.ready（函数（）
{
$（文档）.on（'change'，'#manu'，function（）
{
var id=$（“#manu”）.val（）；
var dataString='id='+id；
$.ajax
({
类型：“POST”，
url:“ajax_modal.php”，
数据：dataString，
cache:false，
成功：函数（html）
{
$（“#modal”）.html（html）；
} 
});
});
});
添加要选择的类，如下所示：
并使用下面的脚本
$（文档）.ready（函数（）
{
$（document）.on（'change'，'.manuClass'，function（）
{
var id=$（this.val（）；
var dataString='id='+id；
$.ajax
({
类型：“POST”，
url:“ajax_modal.php”，
数据：dataString，
cache:false，
成功：函数（html）
{
$（this）.parent（）.parent（）.next（）.children（）.children（“#modal”）.html（html）；
} 
});
});
});
添加要选择的类，如下所示：
并使用下面的脚本
$（文档）.ready（函数（）
{
$（document）.on（'change'，'.manuClass'，function（）
{
var id=$（this.val（）；
var dataString='id='+id；
$.ajax
({
类型：“POST”，
url:“ajax_modal.php”，
数据：dataString，
cache:false，
成功：函数（html）
{
$（this）.parent（）.parent（）.next（）.children（）.children（“#modal”）.html（html）；
} 
});
});
});
评论清楚地表明，您正在复制表单。我认为您的页面上有重复的ID，您的jQuery事件将不再工作。ID只能出现一次
请看这里：
评论清楚地表明，您正在复制表单。我认为您的页面上有重复的ID，您的jQuery事件将不再工作。ID只能出现一次
请看这里：
只是澄清一下。您希望模式详细信息生成一个选择框，其中包含您查询的结果吗？每当我动态创建新字段时
->您正在动态创建哪个字段？此外，如果您动态创建多个字段，则id
将由于重复而变得无用。请尝试使用添加idid=在该选择框的父div中“dynamic_select”
，并使用$（“#dynamic_select”）。在（'change'、'#manu'、（function（）
）上或简单地使用$（document）。在（'change'、'#manu'、（function（）
您有任何错误吗？@SupunPraneeth没有，我没有收到任何错误，但下拉列表没有第二次工作，只是为了澄清。您想让模式详细信息生成一个选择框，其中包含您的查询结果？每当我动态创建新字段时
->您动态创建的是哪个字段？如果您正在创建多个字段请尝试在该选择框的父div中使用add idid=“dynamic\u select”
，并使用$（“#dynamic\u select”）。on（'change'、'#manu'、（function（）
或简单地使用$（document）。on（'change'、'#manu'、（functi
Try this :

<script type="text/javascript">
    $(document).ready(function()
    {
        $(document).on('change','#manu',function()
        {
            var id = $("#manu").val();
            var dataString = 'id='+ id;
            $.ajax
            ({
                type: "POST",
                url: "ajax_modal.php",
                data: dataString,
                cache: false,
                success: function(html)
                {
                    $("#modal").html(html);
                } 
            });
        });
    });
</script>

Add the class to select as shown below: 

<select name="manu" id="manu" class="form-control manuClass" style="width:100%">

And use the below script

<script type="text/javascript">
    $(document).ready(function()
    {
        $(document).on('change','.manuClass',function()
        {
            var id = $(this).val();
            var dataString = 'id='+ id;
            $.ajax
            ({
                type: "POST",
                url: "ajax_modal.php",
                data: dataString,
                cache: false,
                success: function(html)
                {
                    $(this).parent().parent().next().children().children("#modal").html(html);
                } 
            });
        });
    });
</script>