0

我有以下代码（玩一些选择）。

第一次更改功能后，第二次更改功能不起作用：

        jQuery('.toPopSelect').change(function(){
            console.log("hey");
        });

我认为这是因为第一个更改函数替换了一些 html 并且 jQuery 之后无法选择 .toPopSelect 类。

知道为什么会这样吗？有办法解决吗？

    <select class="theSelect">
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
    </select>

    <div class="toPopulate">
        <select class="toPopSelect">
            <option value="1">1</option>
            <option value="2">2</option>
        </select>
    </div>




jQuery(document).ready(function(){

        jQuery('.theSelect').change(function(){
            jQtoPopulate = jQuery('.toPopulate');
            jQtoPopulate.empty();
            jQtoPopSelect = jQuery('.toPopSelect');
            v = jQuery(this).val();

            if ( v == 1) {
                console.log("ues")
                jQtoPopulate.html('<input type="text" size="60"><\/input>');
            } else {
                jQtoPopulate.html('<select class="toPopSelect"><option value="1">1<\/option><option value="2">2<\/option><option value="3">3<\/option><option value="4">4<\/option><option value="5">5<\/option><\/select>');

                jQtoPopSelect.append('<option value="6">6<\/option>');
            }

        });

        jQuery('.toPopSelect').change(function(){
            console.log("hey");
        });

    });

有任何想法吗？

4

4 回答 4

2

您必须使用这样的侦听器，因为您在之后添加代码。

jsFiddle 来说明：http: //jsfiddle.net/s6MVQ/

$(document).on('change', '.toPopSelect', function(){
    alert("ok");
});

更多信息：http ://api.jquery.com/on/

于 2013-09-26T15:36:03.567 回答
1

您必须正确地进行事件委托。由于.toPopSelect是动态创建的，因此您必须按以下方式处理事件。jquery .on() 文档

$(document).on('change', '.toPopSelect', function(){
    console.log("hey");
});

document如果您可以替换为静态外部容器的类/ID，则更好（对于性能）

于 2013-09-26T15:34:38.223 回答
0

尝试这个：

jQuery(document).ready(function(){

        jQuery('.theSelect').change(function(){
            jQtoPopulate = jQuery('.toPopulate');
            jQtoPopulate.empty();
            jQtoPopSelect = jQuery('.toPopSelect');
            v = jQuery(this).val();

            if ( v == 1) {
                console.log("ues")
                jQtoPopulate.html('<input type="text" size="60"><\/input>');
            } else {
                jQtoPopulate.html('<select class="toPopSelect"><option value="1">1<\/option><option value="2">2<\/option><option value="3">3<\/option><option value="4">4<\/option><option value="5">5<\/option><\/select>');

                jQtoPopSelect.append('<option value="6">6<\/option>');
            }

        });

        var c = $(document);
        c.delegate(".toPopSelect","change",function(){ alert("hey"); });

    });
于 2013-09-26T15:34:59.747 回答
0

就像你说的那样。因为您在更改第一个 select 元素时正在更改 DOM，所以它会覆盖第二个 select 元素，因此您的console.log("hey");事件处理程序附加到的元素不再存在。

当您的代码运行时：

jQuery('.toPopSelect').change(function(){
            console.log("hey");
});

它所做的是将处理程序附加到.toPopSelect 在代码运行时匹配的所有元素。它不会将事件处理程序附加到页面中将发生的所有事件.toPopSelect。

因此，您可以在更改 DOM 后重新附加事件处理程序：

jQuery('.theSelect').change(function(){
    // stuff that changes DOM here

    jQuery('.toPopSelect').change(function(){
        console.log("hey");
    });
});

您可以做的另一件事是使用：

$('.toPopulate').on('change', '.toPopSelect', function(){
    console.log("hey");
});

这会分配一个事件处理程序，.toPopulate但只会由匹配第二个参数 ( .toPopSelect) 的事件触发。见：http ://api.jquery.com/on/

请注意，如果您更改或.toPopulate从 DOM 中删除，那么这也将不再适用。（基本上选择最近的祖先.toPopSelect将保留在 DOM 中。）

于 2013-09-26T15:39:43.650 回答