Question

提前感谢你看这个。

我的网络应用程序允许用户从四个不同的下拉菜单中选择选项。当用户进行选择时，程序会成功执行以下click()函数，该函数会在span元素中创建新的div元素：

var activeFilterNames = [];
   $('.filter').click(function()
      {
        if (!this.classList.contains('disabled'))
          {  
          //above checks to see if link has already been clicked 
          //and is therefore disabled. If not, go ahead.

            activeFilterNames.push(this.textContent); 
            //above adds name of selected link to array 

            i = activeFilterNames.length;                                       
            var newFilter = document.createElement('span');
            newFilter.id = activeFilterNames[i-1];
            newFilter.className = this.className+" activated";
            //above adds a new class to identify the filter as 'activated'
            //above retains existing classname to identify
            //which of the four filters it came from

            newFilter.innerHTML = activeFilterNames[i-1];                                                                                                                           
            //above creates display text to be rendered in browser

            document.getElementById('active_filters').appendChild(newFilter);
            //above is the div in which span will be appended to other spans.

            $("#active_filters > span").removeClass('filter');
            //above removes .filter class so that this newly created span does
            //not respond to the .filter click() function.

            $(this).addClass('disabled');                                       
            //above adds 'disabled' class to the originally 
            //clicked link, causing it to skip this block of code
        }                       
    }                                   
);

到目前为止，一切似乎都很好（尽管我可能会遗漏一些东西）。基本上我在html中创建span元素，如下所示：

<span id="id_name" class="menu_name activated">Rendered Name</span>

由于上面的跨度没有filter类，我接着尝试在javascript中创建一个新函数（就像测试一样）以使元素响应：

$('.activated').click(function()
    {
        alert('hi');
    }
);

但没有运气。我试图通过在div内嵌套a或span来重新渲染动态创建的元素，根据需要修改代码，但仍然没有。我想保留span，因为这是我发现将这些动态生成的元素包装到div（#active_filters）中的第二行的唯一方法它们的创建地点。

鉴于我想在每个新创建的activated元素中使span click（）函数响应，是否有人能够看到我做错了什么？

Answer 1

您需要在动态创建的元素上附加click事件。在jQuery中，这可以使用on方法完成，如果您将选择器作为第二个参数传递并附加单击某个父元素body，例如：

$( 'body' ).on( 'click', '.activated', function()
    {
        alert('hi');
    }
);

Answer 2

如果在创建$（'。activated'）之前尝试绑定到DOM元素，则绑定将不起作用。这通常意味着您需要在创建后绑定事件侦听器。如果您正在动态创建DOM元素，则需要执行以下操作：

var activeFilterNames = [];
   $('.filter').click(function()
      {
        if (!this.classList.contains('disabled'))
          {  
            activeFilterNames.push(this.textContent); 
            i = activeFilterNames.length;                                       
            var newFilter = document.createElement('span');
            newFilter.id = activeFilterNames[i-1];
            newFilter.className = this.className+" activated";
            newFilter.innerHTML = activeFilterNames[i-1];
            document.getElementById('active_filters').appendChild(newFilter);

            $('.activated').unbind('click');
            $('.activated').click(function()
                {
                    alert('hi');
                }
            );

            $("#active_filters > span").removeClass('filter');
            $(this).addClass('disabled');                                       
        }                       
    }                                   
);

注意，在绑定之前我们解除绑定。这样可以确保如果多次执行此操作，则不会将2,3,4次绑定到同一DOM元素。

javascript click（）方法/ html有问题

2 个答案: