Question

我在下面的脚本中使用动态文本框。

<script type="text/javascript">
$(function () {
    $("#btnAdd").bind("click", function () {
        var div = $("<div />");
        div.html(GetDynamicTextBox(""));
        $("#TextBoxContainer").append(div);
    });

});
function GetDynamicTextBox() {
    return 'Item Code : <select name="iuname" id="iuname" class="required">'+
            <?php foreach($tItem as $row) : ?>
              '<option value="<?php echo $row->ProductID;?>"><?php echo $row->ProductID;?></option>'+
            <?php endforeach;?>
        '</select>'+

        ' Batch : <input id="buname" name="buname" >'+

        '<td  id="finalResult"></td>'+
        '<br/>'

}
</script>

当我从下拉菜单中更改项目代码时，它必须显示警报。但它没有显示任何警报。

<script>
 $(document).ready(function(){
 $("#iuname").keyup(function(){

      alert('TEST');
     });
  });
</script>

Answer 1

使用Event Delegation创建动态DOM元素

$(document).on('change', '#iuname', function(){
    var val = $(this).val();
    var text = $(this).find('option:selected').text();
    $("#finalResult").text(val);
    //if you want add text means
    // $("#finalResult").text(text);
});

Answer 2

参考On Event

$(document).ready(function(){
 $("#iuname").on('change',function(){

      alert('TEST');
     });
 });

Answer 3

HTML中的标识符必须是唯一的。只要点击btnAdd按钮，就会生成标识为iuname，buname和finalResult的重复元素。这导致HTML变得无效。可以使用公共类来解决问题，然后可以使用Class Selector $('.className')。

脚本，这里我添加了CSS类

function GetDynamicTextBox() {
    return 'Item Code : <select name="iuname" class="iuname required">' +
        <?php foreach($tItem as $row) : ?>
    '<option value="<?php echo $row->ProductID;?>"><?php echo $row->ProductID;?></option>' +
    <?php endforeach;?>
    '</select>' +

    ' Batch : <input class="buname" name="buname" >' +

    '<td  class="finalResult"></td>' +
    '<br/>'

}

事件绑定

截至目前，您正在使用事件的直接绑定，事件处理程序仅绑定到当前选定的元素;它们必须存在于您的代码进行事件绑定调用时的页面上。

由于您要动态创建元素，因此需要使用Event Delegation委派事件方法来使用.on()。

即

$(parentStaticSelector).on('event','selector',callback_function)

实施例

$("#TextBoxContainer").on('change', ".iuname", function(){
    //Your code
});

如何通过div ID读取动态文本框值并在另一个jquery中使用此ID？

3 个答案: