0

使用此代码，如果我更改包含 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新的下拉列表？

谢谢

4

4 回答 4

2

事件委托

$(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);
    });

});

演示：小提琴

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

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

于 2013-09-04T09:35:09.287 回答
0

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

$('form').on('change', "select", function(event) {
  alert(this.id);// by javascript
  // or
  alert($(this).attr("id");// by jquery
});
于 2013-09-04T09:40:46.330 回答
0

请用

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

如果您使用的是 jQuery1.6 或更低版本，请使用 .live

$("select").live('change', function(event) {
    alert(this.id);
});
于 2013-09-04T09:42:07.170 回答
0

调用此代码时：

$(this).replaceWith('VolvoSaabMercedesAudi');

它取消绑定在文档就绪时绑定的选择更改事件

于 2013-09-04T09:44:43.057 回答