直接和委派活动

Question

我有一个带有下拉列表的页面和ADD NEW中的一个选项。为它创建的功能非常有用。

$('#town_id').on('change', function(){
    if($(this).val() == "ADD_NEW"){
        console.log('Add New');
        $('#town_id').val('');
        $('#town_id').trigger('chosen:updated');
        $('#modal-1').modal('show');
    }
});

问题是有时候selectbox根本不在页面上，我会用jquery将它追加到页面中。这篇文章也有效，但是在运行上面的代码时，从jquery添加的ADD NEW没有被提取。如果我将上面的代码放在添加选择代码下面，然后在下拉列表中选择添加新功能就可以了。

// remove towns text
$('.towns').html('<select class="form-control chosen add_town" name="town_id" id="town_id" data-rule-required="true" data-placeholder="Choose a town"></select');
$("#town_id").chosen({disable_search_threshold: 15});
$("#town_id").css('width', '100%');


// add chosen select
$('#town_id').append('<option value="' + result.id + '" selected>' + result.name + '</option>');
$('#town_id').append('<option value="ADD_NEW">Add new town...</option>');
$('#town_id').trigger('chosen:updated');

有没有办法让它工作而不重复选择代码？

Answer 1

是的，有一个解决方案。您必须使用委托，因为HTML元素是动态创建的。

考虑.towns元素选择框的容器和#town_id选择框，语法如下所示：

$('.towns').on('change', '#town_id', function(){
    if($(this).val() == "ADD_NEW"){
        console.log('Add New');
        $('#town_id').val('');
        $('#town_id').trigger('chosen:updated');
        $('#modal-1').modal('show');
    }
});

是的，这适用于静态和动态选择框。

直接和委派活动

提供selector时，事件处理程序称为委派。当事件直接发生在绑定元素上时，不会调用处理程序，而仅适用于与选择器匹配的后代（内部元素）。 [...]

事件处理程序仅绑定到当前选定的元素; 在您的代码调用.on() 时，它们必须存在于页面上。

Read more

JQuery函数仅适用于函数

1 个答案:

直接和委派活动