Jquery函数未触发（第二时刻注入html）[重复]

Question

抱歉，标题不太清楚。

我正在使用 Twitter Bootstrap Modal 编辑一些记录。

<a class="contact" href="#" data-form="/edit/models/sms/{{ @value['fields']['id'] }}" title="Edit">
       <span class="fa-stack fa-lg">
       <i class="fa fa-square-o fa-stack-2x"></i>
       <i class="fa fa-pencil fa-stack-1x"></i>
       </span>
 </a>

这是打开 Modal 的 javascript 代码：

$(".sms-model").click(function(ev) { // for each edit contact url
    ev.preventDefault(); // prevent navigation
    var url = $(this).data("form"); // get the contact form url

    $("#smsModelModal").load(url, function() { // load the url into the modal
        $(this).modal('show'); // display the modal on url load
    });
   $("#smsModelModal").modal('show'); // display the modal on url load
    return false; // prevent the click propagation
});

最后这是在模态中注入的表单：

<div class="modal-body">
            <form role="form" method="post" class="sms-model-form" action="{{ @SERVER.REQUEST_URI }}">
                <fieldset>
                    <legend class="sr-only">Edit</legend>
                    <input type="hidden" name="edit_id_model" value="{{ isset(@sms_model) ? @sms_model[0]['fields']['id']['value'] : '' }}" />
                    <div class="form-group">
                        <label for="title">{{ @lng_label_sms_title }}</label>
                        <input type="text" class="form-control required-field" name="title" value="{{ isset(@sms_model) ? @sms_model[0]['fields']['title']['value'] : '' }}"/>
                    </div>
                    <div class="form-group">
                        <label for="text">{{ @lng_label_sms_text }}</label>
                        <textarea class="form-control" name="text" class="required-field">{{ isset(@sms_model) ? @sms_model[0]['fields']['text']['value'] : '' }}</textarea>
                    </div>
                    <button type="submit" class="btn btn-white pull-right">
                        <i class="fa fa-plus-circle"></i> {{ isset(@sms_model) ? @lng_btn_edit : @lng_btn_add }}
                    </button>
                    <input type="submit" class="btn btn-primary" value="Test" />
                </fieldset>
            </form>
        </div>

一切都像魅力一样。现在我将通过 AJAX 提交表单。

所以我要添加这个：

$('.sms-model-form').on('submit', function(e) {
        console.log('test on submit....');
        e.preventDefault();
        $.ajax({
            type: $(this).attr('method'),
            url: this.action,
            data: $(this).serialize()+'&ajax=TRUE',
            context: this,
            success: function(data, status) {
                $('#smsModelModal').html(data);
            }
        });
        return false;
    });

但是表单是通过常规模式提交的，而不是通过 AJAX。 IE。我没有在控制台中记录事件。

我认为这是因为表单是在页面中的第二个时刻注入的，而不是在

$(document).ready(function() {

我说的对吗？我该如何解决我的问题？

Answer 1

您几乎肯定需要通过委托设置您的事件处理程序：

$(document).on('submit', '.sms-model-form', function(e) {

在 DOM 的根目录附加一个处理程序来捕获冒泡的“提交”事件。因为您是在代码运行之后添加模态对话框内容，所以如果您按照自己的方式进行操作，代码将根本无效； ".sms-model-form" 选择器将不匹配任何内容，因此不会在任何地方附加任何事件处理程序。

使用.on() 的上述形式，您可以确保涉及动态添加的 DOM 子结构的事件仍将按您希望的方式处理。