1

我有一个表单,它在页面加载时具有三个输入——2 个选择框和 1 个文本框。

我创建了一个 AJAX 调用,它将根据用户在第一个选择框中选择的内容填充第二个选择框。我还有一个按钮,它将具有唯一名称和 ID 的相同输入字段附加到表单中。

我遇到的问题是试图找出哪个选择框已更改。到目前为止,当页面加载时,我可以选择一个选项并填充第二个选择框,但是当我附加另一组输入字段并从第二个选择框中进行选择时,它不会填充相应的选择框。

如果我从页面加载时显示的选择框中进行选择,而不是填充其相应的选择框,它会填充新附加的选择框。

这是代码:

$(document).ready(function() {
var i = $('.clonedInput').length;
var count = 2;

$('#prescriptions'+i).change(function() {
    alert(i);
    var value = $(this).val();
    var dataString = 'prescription='+value;
    $.ajax ({
        type: 'POST',
        url: '<?php echo base_url(); ?>index.php/patients/dynamic_ddl',
        data: dataString,
        cache: false,
        success: function(html) { $('#dosage'+i).html(html); } 
    });
});

$(function(){ 
    $('#btnAdd').click(function(){          
        $('#page_properties').append('<tr id="input'+count+'" class="clonedInput">'+
                                '<td><label for="prescriptions'+count+'">Prescription</label></td>'+
                                '<td><select id="prescriptions'+count+'" class="prescriptions" name="prescriptions'+count+'">'+
                                '<option selected="selected">--Select Prescription--</option>'+
                                '<?php foreach ($prescriptions_sel as $option):?>'+
                                '<option value="<?php echo $option['prescription']; ?>"><?php echo $option['prescription'];?></option>'+
                                '<?php endforeach ?></select></td>'+
                                '<td>Dosage: <select id="dosage'+count+'" name="dosage'+count+'" class="dosage">'+
                                '<option selected="selected">--Select Dosage--</option>'+
                                '</select>'+
                                'Add Dosage: <input type="text" name="new_dosage'+count+'" value="" /></td></tr>');
        $('#btnDel').removeAttr('disabled');
        count++;
        i++;
    });
}); 


$('#btnDel').click(function() {                 
    var num = $('.clonedInput').length; // how many "duplicatable" input fields we currently have                 
    $('#input' + num).remove(); // remove the last element                   

    // enable the "add" button                 
    $('#btnAdd').removeAttr('disabled'); 

    // if only one element remains, disable the "remove" button                 
    if (num-1 == 1) $('#btnDel').attr('disabled','disabled'); 
    count--;
    i--;
});
$('#btnDel').attr('disabled','disabled');
});


我已经在这几个小时了,用if语句、for语句、foreach语句(你可以命名)来尝试这个。

4

1 回答 1

1

不太确定我是否遵循您的意思,但听起来您的事件仅在文档准备好时存在的项目上触发,而不是动态添加的那些项目。如果是这样,并且您的问题出在您的更改功能上,您需要使用实时功能来绑定您的事件而不是更改功能。IE

$('#prescriptions'+i).change(function() {

需要是

$('#prescriptions'+i).live('change', function() {
于 2012-06-14T01:40:41.863 回答