-1

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

http://jsfiddle.net/queZ6/107/

当您进入框中时，我想显示警报并捕获焦点事件。我基本上想更改围绕每个输入的元素的突出显示，随着您填写表格。这基本上是向用户发出的一个信号，可以轻松查看他们所在的字段。

我终其一生都无法弄清楚如何通过点击框（或者显然也单击它）来捕获焦点事件。

考虑到您正在输入 INTO 输入，我不明白为什么这很困难。javascript 不能看到新创建的输入（您正在输入的输入）并绑定到它吗？JS有时让我很困惑：S

4

2 回答 2

2

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

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

相反会是

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

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

于 2012-09-16T02:44:51.460 回答
-1

更新：

虽然旧的答案表明您不能绑定到动态创建的元素（这在某种程度上仍然是正确的），但对相关插件的更新已经使这不再是一个问题。

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

为此，必须做的就是通过 绑定到原始目标选择列表上.on()的事件。chosen:showing_dropdown

但是为了解决alert box不断创建的问题，我决定使用underscore.js的 .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!');
});

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

工作示例

于 2012-09-16T02:46:19.610 回答