Question

这个问题已被问过很多次了，但是我没有看到“多种”的答案：

当您选中框时，我想显示提醒并捕获焦点事件。我基本上想要更改围绕每个输入的元素的突出显示，随后填写表单时。它基本上是一个信号，让用户可以轻松查看他们的字段。

我不能为我的生活弄清楚如何通过拼贴到框中来捕捉焦点事件（或者显然也点击它）。

我不明白为什么这很困难，因为你正在输入INTO输入。不能javascript看到新创建的输入（你输入的内容）并绑定到那个？ JS有时会让我感到困惑：S

Answer 1

因为元素是动态创建的，所以您需要使用event delegation，使用jquery的on。这将允许您在元素存在之前附加处理程序。

$('.chzn-choices').focus(function(e){

将改为

$("container").on("focus", '.chzn-choices',function(e){

其中container是一些非动态加载的静态祖先元素的选择器。如果不存在这样的容器，则可以使用document，尽管应尽可能避免使用。

Answer 2

<强>更新

虽然旧答案声明您无法绑定到动态创建的元素（这在某种程度上仍然如此），但对该插件的更新使这不再是一个问题。

虽然有问题的插件仍有多次触发处理程序的问题，但在使用警报消息的情况下，由于更新，现在可以绑定到那些动态创建的元素。

为了做到这一点，所有人都必须通过.on()绑定到原始目标选择列表上的chosen:showing_dropdown事件。

为了解决连续创建的警告框的问题，我决定使用underscore.js's .debounce()方法，因此每1秒才会立即触发一次。

下划线库绝不是必需的，但是你需要有一些去抖功能才能绕过那个小怪癖。

var debouncedAlert = _.debounce(window.alert, 1000, true);
$('#select').chosen();

$('#select').on('chosen:showing_dropdown', function(e){
    e.preventDefault();
    e.stopPropagation();
    debouncedAlert('focused');
});

工作示例：

$(document).ready(function() {
    var debouncedAlert = _.debounce(window.alert, 1000, true);
    $('#select').chosen();

    $('#select').on('chosen:showing_dropdown', function(e){
        e.preventDefault();
        e.stopPropagation();
        debouncedAlert('focused');
    });
    
    $('button').click(function() {
        $('#select').trigger('chosen:open');
    });

});

body {
    margin: 10px;
}

select {
    width: 200px;
}

<link href="https://harvesthq.github.io/chosen/chosen.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><script src="https://harvesthq.github.io/chosen/chosen.jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
<input type="text" value="Put your cursor here then Press Tab. Chosen will be focused!" style="width:100%">
<br>
<select id="select" multiple>
    <option value="1">abc</option>
    <option value="2">def</option>
    <option value="3">ghi</option>
</select>
<br>
<button>Press this button. Now chosen <b>will</b> be focused! :)</button>

旧回答：

不，它不能。 Jquery的常规绑定方法不使用动态创建的元素。要绑定到这些类型的元素，您需要.on()。

$('.chzn-choices').focus(function(e){
    e.preventDefault();
    alert('focused!');
});

将更改为：

$('#select_chzn').on('focus', '.chzn-choices', function(e){
    e.preventDefault();
    alert('focused!');
});

在这种情况下，您将事件委托给容器元素，然后将其指向您的特定元素。

Working example

.focus（函数）选择多个

2 个答案: