javascript - 为运行时插入的 Modal 加载 Javascript

Question

如何仅在加载 html 后执行此 javascript。

<input type="text" id="rmb" name="price" class="price span1" value="2" />
<input type="text" id="sgd" />


    $('#rmb').keyup(function(){
        $('#sgd').val(Number(this.value/4.7).toFixed(2));
    });

在我的 .js 文件中，用于检测是否单击了提交按钮

dialogEditItem.one('click', '.submit', function(e){

我的jsfiddle http://jsfiddle.net/ZLr9N/

我的模态 html

<script id="product-data" type="text/html">

        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
            <h3><%= data.name %></h3>
        </div>
        <div class="modal-body">
            ...
        <input type="text" id="rmb" name="price" class="price span1" value="<%= data.price %>">
                        <input type="text" id="sgd" />
                    ...
        <div class="modal-footer">
            <button class="btn green submit">Submit</button>
            <button class="btn red cancel" data-dismiss="modal">Cancel</button>
        </div>
    </script>

Answer 1

您尝试在输入元素成为 DOM 的一部分之前将处理程序绑定(bind)到它:

$('#rmb').keyup(handlerFn); // when #rmb is not present yet the jQuery object will be empty and no handler will be bound

而是使用事件委托(delegate)，将处理程序绑定(bind)到始终存在的 document 对象:

$(document).on('keyup', '#rmb', handlerFn); //document will always be present, no matter if #rmb is added to the DOM lateron, so binding will be successful

参见the docs .on() 和委托(delegate)。