Question

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

在第一个更改功能之后，第二个更改功能不起作用：

        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");
        });

    });

有什么想法吗？

Answer 1

你必须使用这样的监听器，因为你之后添加了代码。

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

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

有关以下内容的更多信息：http://api.jquery.com/on/

Answer 2

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

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

如果你可以用静态外部容器的类/ id替换document，那就更好了（性能）

Answer 3

试试这个：

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"); });

    });

Answer 4

就像你说的那样。因为您在更改第一个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/

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

在更改函数后使用jQuery选择对象，修改了需要选择的元素的html结构

4 个答案: