javascript - 使 jquery 代码适用于动态添加的内容

Question

这段代码适用于所有现有的 html 下拉菜单，但如何使其也适用于动态添加的下拉菜单

这是jquery代码

$(document).ready(function () {

  $('select.select').each(function () {
    var title = $(this).attr('title');
    if ($('option:selected', this).val() != '') {
      title = $('option:selected', this).text();
      $(this)
        .css({
          'z-index': 10,
          'opacity': 0,
          '-khtml-appearance': 'none'
        })
        .after('<span class="select">' + title + '</span>')
        .change(function () {
          val = $('option:selected', this).text();
          $(this).next().text(val);
        })
    }
  });
});

Answer 1

$(document).ready(function () {

    initDropDowns();

    function initDropDowns(){
      $('select.select').each(function () {
        var title = $(this).attr('title');
        if ($('option:selected', this).val() != '') {
          title = $('option:selected', this).text();
          $(this)
            .css({
              'z-index': 10,
              'opacity': 0,
              '-khtml-appearance': 'none'
            })
            .after('<span class="select">' + title + '</span>')
            .change(function () {
              val = $('option:selected', this).text();
              $(this).next().text(val);
            })
        }
      });
    }

    // on dropDowns add --> initDropDowns();

});

Answer 2

您需要使用 $(document).live() 而不是 $(document).ready()

.ready() 允许您注册一个在 DOM 就绪时触发的回调 - 这类似于使用 window.onload 但更早触发（并且您可以注册多个回调）。

.live() 允许您基于选择器注册一系列事件的回调，该选择器持续监控 DOM 并将自己注册到添加的新节点。