javascript click()方法的问题/ html

Trouble with javascript click() method / html

本文关键字：问题 html 方法 click javascript      更新时间：2023-09-26

提前感谢你看这个。

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

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
        }                       
    }                                   
);

到目前为止，一切似乎都很好(尽管我可能遗漏了一些东西)。实际上，我创建的span元素看起来像这样在html:

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

并且由于上面的span没有filter类，然后我尝试在javascript中创建一个新函数(只是作为测试)以使元素响应:

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

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

有人能看到我做错了什么，因为我想让activated点击()函数响应每个新创建的span元素?

如果您试图在创建$('.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元素。

您需要在动态创建的元素上附加click事件。在jQuery中，这可以通过on方法来完成，如果你将选择器作为第二个参数传递给父元素，并将click附加到body上，例如:

$( 'body' ).on( 'click', '.activated', function()
    {
        alert('hi');
    }
);
相关文章：