Question

我有一个页面，在用户与之交互后，通过ajax将元素加载到自身。

我的麻烦是我无法让Jquery识别出后来从函数refresh_current_items开始工作的元素。

我的Jquery代码：

<script type="text/javascript">    
    $(function() {        
        refresh_open_handling_units();
        refresh_closed_handling_units();    
        refresh_avaiable_shippable_items();                         

    });

    $('#length_imp').on({
            keyup: function() { var val1 = 2.54 * $("#length_imp").val();
                                $("#length_cm").val(val1); }                            
        });

    function refresh_current_items(unit){
        $.post("ajax_print_current_unit.php", { unit: unit,
                                                            save_flag: 'save_button'}, function(b)
                    {
                        $('#added_items').html(b).show();
                    });
    }
    ......

通过ajax加载的HTML：

inches <input type="text" id="length_imp">
cm <input type="text" id="length_cm">

我得到的唯一控制台错误是“无法加载资源：net :: ERR_CACHE_MISS

我知道这不是最佳方式，但我最终得到的代码如下：

$(document).on( 'keyup', '#length_imp', function () {
        var val1 = 2.54 * $("#length_imp").val();
        $("#length_cm").val(val1);
    }
);
$(document).on( 'keyup', '#length_cm', function () {
            var val1 = 0.3937 * $("#length_cm").val();
        $("#length_imp").val(val1);
    }
);

Answer 1

好吧，$('#length_imp').on不附加处理程序，因为运行它时没有#length_imp。您可以将监听器附加到document并检查目标是否为#length_imp

$(document).on( 'keyup', '#length_imp', function () {
        var val1 = 2.54 * $("#length_imp").val();
        $("#length_cm").val(val1);
    }
);

Fiddle

如何在Ajax加载的元素上编写Jquery .keyup函数

1 个答案: