jquery - 在此元素后插入克隆时元素丢失事件

Question

我在 id="coclevel1" 的页面上有一个下拉列表 ( )。如果当前选定的选项有子项目，那么我必须添加新的下拉列表并用子项目填充它。下一个下拉列表应命名为“coclevel2”、“coclevel3”等。我必须为每个添加的下拉列表执行此事件。在 $(document).ready 中我放置了:

$('[id^=coclevel]').live('change', function() {
    var currElement = $(this).attr('id');
    alert(currElement); //for debug
    cleanUpCocOptionsAfter(currElement);
    renderSubItemsOf(currElement);
});

renderSubItemsOf(currElement); 查询数据库，如果数据不为空，则添加新的下拉列表并填充它。

function cleanUpCocOptionsAfter(currElement) {
    var num = $('.cocItems').length;
    var currNum = parseInt(currElement.substring(8, currElement.length));
    for (var i = currNum + 1; i <= num; i++) {
        $('#coclevel' + i).remove();
        $('#cocBr' + i).remove();
    }
}

function renderSubItemsOf(currElement) {
    var parentId = $('#' + currElement + ' option:selected').val();
    $.getJSON('getchildrenof/' + parentId,
            function() {

            }).success(function(data) {
                var len = data.length;
                if (len > 0) {
                    var newElemSelector = '#' + addCocOptionAfter(currElement);
                    for (var i = 0; i < len; i++) {
                        $(newElemSelector).append($("<option></option>").attr("value", data[i].id).text(data[i].description));
                    }
                } else {
                    //not developed yet
                }
            });
}

function addCocOptionAfter(currElement) {
    // how many "duplicatable" input fields we currently have
    var num = $('.cocItems').length;
    var currNum = parseInt(currElement.substring(8, currElement.length));
    var currElemSelector = '#' + currElement;
    // the numeric ID of the new input field being added
    var newNum = new Number(num + 1);

    // create the new element via clone(),
    //and manipulate it's ID using newNum value
    var newElemId = 'coclevel' + newNum;

    var newElem = $(currElemSelector).clone().attr('id', newElemId).empty();
    $(newElem).append($("<option></option>").attr("value", -1).text('-- Select one --'));

    // insert the new element after the last "duplicatable" input field
    $(currElemSelector).after(newElem);
    $(currElemSelector).after('<br/>').attr('id', 'cocBr' + newNum);

    return newElemId;
}

添加新的下拉框和填充工作正常，但此后先前的下拉框丢失了事件，并且当我尝试更改所选选项时，什么也没有出现(浏览器不显示 alert(currElement);//用于调试)。请帮忙解决这个问题。

最佳答案

我不确定我明白你在问什么，但是如果你希望使用元素克隆 jQuery 事件处理程序，那么你需要使用 .clone(true) 而不仅仅是克隆()。请参阅here了解更多信息。

关于jquery - 在此元素后插入克隆时元素丢失事件，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/7460506/

上一篇：jquery - CSS3 - 使用 :checked selector on older browsers (ie7/ie8) 样式 radio 输入

下一篇：Jquery加载顺序

相关文章：

javascript - 将数组从 javascript 发送到 php 然后将其写入文件

Javascript 菜单向左移动并在 Android 浏览器的屏幕右侧显示间隙

javascript - jQuery 和从开始值和结束值动态生成的表

javascript - 使用 javascript 打开一个新窗口(谷歌地图)，删除以前的事件处理程序

javascript - 当输入文本字段达到最大长度时移动焦点

javascript - jQuery 事件和双重触发？

c# - 在 Asp.net HTML 控件中动态获取城市

javascript - 在带有图像的某些 div 中水平滚动而不是垂直滚动？

javascript - 如何在 JS 事件监听器中获取正确的按键语言和大小写？

javascript - Reactjs URL.createObjectURL 不是函数

©2024 IT工具网  联系我们

Answer 1

我不确定我明白你在问什么，但是如果你希望使用元素克隆 jQuery 事件处理程序，那么你需要使用 .clone(true) 而不仅仅是克隆()。请参阅here了解更多信息。