Question

使用此代码，如果我更改包含opt1 / opt2的下拉列表，我会收到一条警告，显示ID为“drop”

如果我点击“clickme”测试输入框，这会更改为新的下拉列表，但是当我更改其中的选项时，没有发出警报来告诉我该ID。

<script language="javascript">
    $(document).ready(function() {
        $('#test').bind('click', function() {
            $(this).replaceWith('<select id="test" name="test"><option value="volvo">Volvo</option><option value="saab">Saab</option><option value="mercedes">Mercedes</option><option value="audi">Audi</option></select>');
        });

        $("select").change(function(event) {
            alert(this.id);
        });
    });
</script>

<form>
    <input id='test' name='test' type='text' value='ClickMe.'><br>
    <select id='drop' name='drop'>
        <option value='0'></option>
        <option value='1'>Opt1</option>
        <option value='2'>Opt2</option>
    </select><br>

    <input type='submit' value='submit'><br>

    <?php
        if (isset($_REQUEST['test'])) echo $_REQUEST['test'];
    ?>

为什么我看不到新下拉列表的id？

由于

Answer 1

事件委托

$(document).ready(function () {

    $('#test').bind('click', function () {
        $(this).replaceWith('<select id="test" name="test"><option value="volvo">Volvo</option><option value="saab">Saab</option><option value="mercedes">Mercedes</option><option value="audi">Audi</option></select>');
    });

    $('form').on('change', 'select[name="test"]', function (event) {
        alert(this.id);
    });

});

演示：Fiddle

当您使用普通事件注册模型时，它会将处理程序直接注册到目标，这些处理程序在处理程序注册执行时存在于dom中。因此，动态添加的元素将不会获得这些处理程序。

对此的解决方案是使用事件委托，在此模型中，处理程序注册到祖先元素，当页面加载了选择器以过滤掉源元素时，该元素将出现。这利用了事件传播 - 元素中发生的事件传播到所有祖先元素（像焦点事件这样的例外）。因此，元素中发生的事件会传播到其中一个元素中的祖先元素，然后处理器被注册，然后事件源元素（event.target）及其祖先与作为第二个参数传递的选择器匹配，如果满足则处理程序已执行。

Answer 2

当元素动态插入到DOM（文档对象模型）中时，例如使用Ajax，则必须将所有事件处理程序附加到父元素。因此，对于新项目，您需要将.on应用于父元素

$('form').on('change', "select", function(event) {
  alert(this.id);// by javascript
  // or
  alert($(this).attr("id");// by jquery
});

Answer 3

请使用

$(document).on('change', 'select', function(event) {
    alert(this.id);
});

如果您使用的是jQuery1.6或以下，请使用.live

$("select").live('change', function(event) {
    alert(this.id);
});

Answer 4

调用此代码时：

$（本）.replaceWith（ 'VolvoSaabMercedesAudi'）;

它取消绑定在文档就绪

上绑定的选择更改事件

Jquery replacewith - 读取id值

4 个答案: