定位哪个选择框在动态创建时已更改

时间:2012-06-14 01:34:51

标签: jquery

我有一个表单,当页面加载时有三个输入 - 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语句(您将其命名)。

1 个答案:

答案 0 :(得分:1)

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

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

需要

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