Jquery 来自动态使用的主干模板控件的事件未触发

我需要根据用户的选择显示div：1、2或3。如果选择了一个，则只会从主干模板填充一个div。如果两个，将填充两个div，对于三个div，将填充三个div。第一个在主干初始化阶段填充。问题是，在初始化阶段从模板加载的来自第一个div的select控件将触发其更改事件。但另外两个div的选择控制按钮没有启动。我的代码结构如下：

    <input type="radio" name="chooseRadio" value="1" checked="checked" /> Choose 1
    <input type="radio" name="chooseRadio" value="2" /> Choose 2
    <input type="radio" name="chooseRadio" value="3" /> Choose 3
    <div id="locations">
        <div id="divLoc1">
        </div>
        <div id="divLoc2">
        </div>
        <div id="divLoc3">
        </div>
    </div>
    <script type="text/template" id="template1">
        <select id="select1" class="added-later">
            <option value="test1">test 1</option>
            <option value="test2">rest 2</option>
        </select>
    </script>
    <script type="text/javascript">
        $(function () {
            var loc = Backbone.Model.extend({
                current: 1,
                template: _.template($('#template1').html()),
                events: {
                    'change #select1': 'onSelectChange'
                },
                onSelectChange: function () {
                    alert('yes');
                },
                initialize: function () {
                    var loc1 = this.template();
                    $('#divLoc1').html(loc1);
                    $(this.loc2).hide();
                    $(this.loc3).hide();
                },
                maintainLocations: function () {
                    alert(this.current);
                    switch (this.current) {
                        case '1':
                            $('#divLoc2').hide();
                            $('#divLoc3').hide();
                            break;
                        case '2':
                            var loc1 = this.template();
                            $('#divLoc2').html(loc1);
                            $('#divLoc2').show();
                            $('#divLoc3').hide();
                            break;
                        case '3':
                            var loc1 = this.template();
                            $('#divLoc2').html(loc1);
                            $('#divLoc3').html(loc1);
                            $('#divLoc2').show();
                            $('#divLoc3').show();
                            break;
                    }
                }
            });
            var appView = new loc();

            $('input[name=chooseRadio]').click(function () {
                var val = $(this).val();
                appView.current = val;
                appView.maintainLocations();
            });

            $('#select1').change(function () {
                alert('fired!');
            });
        });

    </script>

---

我正在使用主干1.1.2。有什么想法吗？

这可能是因为当您连接jquery事件处理程序时，它只连接DOM中现有元素的处理程序

对于插入[或被插入]的每个新DOM元素，必须重新调用事件处理程序连接代码

例如

    function wireUpHandlers() {

      $('input[name=chooseRadio]').click(function () {
                    var val = $(this).val();
                    appView.current = val;
                    appView.maintainLocations();
                });

                $('#select1').change(function () {
                    alert('fired!');
                });


    }

    $(document).ready(function() {
        wireUpHandlers();
    });

---

现在，每当您在页面中添加新HTML时，请再次调用WireUpHandler，这些处理程序也将用于添加的新元素。

主干视图可以通过events属性从动态生成的DOM元素接收事件，只要动态生成的DOM元素是视图el的后代。但是@chridam我在这里使用的是模型，而不是视图。为什么您使用的模型就像它是视图一样？很明显，视图具有事件并与DOM交互，而不是与模型交互。您的代码不起作用，因为它没有任何意义。正如我所意识到的，上面的模型应该是视图，并且应该指定$el元素。之后，我可以从$el及其所有子项检测事件，并相应地采取行动。我想我弄乱了问题中的模型和视图概念。我一点也不清楚。谢谢大家。你们的方式是有效的，而且WireUpHandler无法脱离文档就绪块。然而，我正在寻找一种方法。你能为我的案子提出同样的建议吗？谢谢。据我所知，主干和jQuery事件处理程序不在同一条路径上。。因此，我不认为有任何方法可以做到这一点。因为无法让jQuery知道将事件处理程序绑定到主干追加的动态HTML元素