javascript - 从 javascript 添加 html 但无法使用 jQuery 切换功能？

Question

这是我加载html的js函数

function getLeftCategories() {

    var id = 3;
    $.getJSON("/api/kategori/getKategoriByTedarikci/" + id, function (data) {

        var obj = jQuery.parseJSON(data);

        $.each(obj, function () {
            if (this.UstKategoriId == null) {
                var kTop =
                    '<li>' +
                        '<a>' + this.KategoriAdi + '<span>+</span></a>' +
                        '<ul id="ulAltKategori">' +

                        '</ul>' +
                   '</li>'
                $("#ulKategoriler").append(kTop);
            }
        });

        $.each(obj, function () {
            if (this.UstKategoriId != null) {

                var sTop =
                    '<li>' +
                        '<a>- ' + this.KategoriAdi + '</a>' +
                    '</li>'
                $("#ulAltKategori").append(sTop);
            }
        });
    });
}

这是我的 html 方面

<div class="box">
<div class="box-heading">Kategoriler</div>
<div class="box-content">
    <div class="box-category">
        <ul id="ulKategoriler">

        </ul>
    </div>
</div>

这是我的脚本功能来切换

$(function () {
    $('.box-category a > span').each(function () {
        if (!$('+ ul', $(this).parent()).length) {
            $(this).hide();
        }
    });
    $('.box-category a > span').click(function (e) {
        debugger;
        e.preventDefault();
        $('+ ul', $(this).parent()).slideToggle();
        $(this).parent().toggleClass('active');
        $(this).html($(this).parent().hasClass('active') ? "-" : "+");
        return false;
    });
    $('.filter-active span').click();
});

如果我从 javascript 切换功能添加 html 不起作用，我是否错过了第一次加载到页面的内容？

Answer 1

只需更改您的脚本：

$('.box-category a > span').click(function (e) {
  debugger;
  e.preventDefault();
  ...
}

至

$('.box-category').on('click', 'a > span', function (e) {
  debugger;
  e.preventDefault();
  e.stopPropagation();
  ...
}

Answer 2

如果这是动态加载的 html，那么您将需要事件委托来处理这个

$(document).on('click', ".box-category a > span", function () {
...
}