Question

我正在尝试附加来自JSON文件的链接，但是它们的this.getStyles = function (key, props) { var base = _styles.defaultStyles[key](props); base.boxSizing = 'border-box'; var custom = _this7.props.styles[key]; return custom ? **custom(base, props)** : base; };无法正常工作。

HTML：

onClick

Javascript：

<li class="nav-item dropdown" id = "views">
    <a class="nav-link dropdown-toggle" id="view-type" data-toggle="dropdown" data-selected="high_level"  aria-haspopup="true" aria-expanded="false">High Level View</a>
    <div class="dropdown-menu" aria-labelledby="view-type" style="height: 35vh; overflow: auto;">
      <h7 class="dropdown-header">View Type</h7>
      <a class="dropdown-item filter-option active" href="javascript:void(0);" id="high_level">High Level View</a>
    </div>
  </li>

我的代码有问题吗？我似乎无法弄清楚为什么我的链接不起作用。我需要d3.json(theURL, function(error, data) { if (error) throw error; var unique = []; data.forEach(function(e){ if(unique.indexOf(e.segment) == -1){ unique.push(e.segment); } }); unique.forEach(d => $('#views .dropdown-menu').append(`<a class="dropdown-item filter-option ecodes" href="javascript:void(0);" id="${d.substring(0, 4)}">${d}</a>`) ) if($('#all').hasClass('active') == true) { $('.ecodes').remove(); } }); $('.filter-option').on('click', function() { let text = $(this).text(); let selected = $(this).prop('id'); $(this).parent().parent().children('a').text(text); $(this).parent().parent().children('a').data().selected = selected; filters[$(this).parent().parent().children('a').prop('id').replace('-','_')] = selected; $.each($(this).parent().children('a'), function(i,d) $(d).removeClass('active'); }); $(this).addClass('active'); });才能拥有onClick类。

Answer 1

您应该将静态元素用作启动器，然后在on方法内委派动态节点（子节点）

 $('dropdown-menu').on('click','.filter-option', function() {
      let text = $(this).text(); 
      let selected = $(this).prop('id'); 
      $(this).parent().parent().children('a').text(text);
      $(this).parent().parent().children('a').data().selected = selected;
      filters[$(this).parent().parent().children('a').prop('id').replace('-','_')] = selected;

     $.each($(this).parent().children('a'), function(i,d) 
     $(d).removeClass('active'); });
     $(this).addClass('active');
    });

Answer 2

在注入新链接之前，必须将单击委托给页面中存在的父元素。

jQuery的on方法接受选择器作为第二个参数，因此您可以更新以下行：

$('.dropdown-menu').on('click', '.filter-option', function() {
  let text = $(this).text(); 
  let selected = $(this).prop('id'); 
  $(this).parent().parent().children('a').text(text);
  $(this).parent().parent().children('a').data().selected = selected;
  filters[$(this).parent().parent().children('a').prop('id').replace('-','_')] = selected;

 $.each($(this).parent().children('a'), function(i,d) 
 $(d).removeClass('active'); });
 $(this).addClass('active');
});

了解更多：http://api.jquery.com/on/#direct-and-delegated-events

如何使从JSON添加的链接可点击？

2 个答案: