Question

我知道这里有很多回答的问题，但是我认为这是一个更具体的问题。

我用动态生成的产品填充div。每个产品都有一个带有加号和减号按钮的输入字段，用于调整输入中的数量。

无论我尝试什么，我都无法使它正常工作。我知道我必须使用on单击动态元素。

我的HTML

<div class="carousel-wrapper">
    <div class="custom-products" data-getnew="popular-products"></div> 
</div>
<div class="carousel-wrapper">
    <div class="custom-products" data-getnew="newest-products"></div> 
</div>

我的jQuery

function customProducts(url, container){
   $.get(url + '?format=json', function(e){
        var productsHtml = [];
            $.each(e.products, function(index, product) {

              var productHtml = '<div class="col col-25 m-50 t-25 item-grid"><div class="item quick-view-item  clearfix" data-handle="'+product.url+'" data-vid="'+product.vid+'">
              .......
              .......
              productHtml = productHtml + '<div class="to-cart"><form action="/cart/add/'+product.vid+'" id="product_configure_form_'+product.id+'" method="post"><div class="custom-quantity-input"><input type="text" name="quantity" value="1"><div class="item-quantity-btns"><div class="up quantity-btn quantity-input-up"><i class="fa fa-plus"></i></div><div class="down quantity-btn quantity-input-down"><i class="fa fa-minus"></i></div></div></div><button type="submit" class="item-add-btn-cart btn btn-custom-1 with-qty redirect" title=""></button></form></div> </div> </div> </div> </div>';
             productsHtml.push(productHtml);
            });
            productsHtml = productsHtml.join('');
        $(container).html(productsHtml);
    })
}

然后像这样运行它：

$(function(){

$('.carousel-wrapper .custom-products').each(function(){
  var url = $(this).data('getnew')
  var container = $(this)
    customProducts(url, container)
});

点击加/减按钮

$('.carousel-wrapper .custom-products').each(function(){
   $('.item-grid').on('click', '.up', function (){ 
     console.log($(this))
     alert('test')
   });
   $('.item-grid').on('click', '.down', function (){ 
     console.log($(this))
     alert('test')
   });
 });
 .....

为什么这不起作用？控制台和警报不显示任何内容。据我了解，您有一个包含动态项目的静态容器，然后选择带有.on的按钮。怎么了？

任何帮助，我们将不胜感激。

Answer 1

以动态方式创建元素时，必须在文档上触发事件。

async create(dto: ArticleClassificationDto): Promise<any> { this.repository.save(dto).then(article => { article.classification.forEach(item => { this.ClassificationRepository.findOne( { // the privous method is get all the articles from databse and push into this array // relations: ['articles'], where: { id: item }// now I change the data strcture, just contains id instead of {id} } ).then(classification => { // console.log(article); console.log(classification); // cmd will show ' UnhandledPromiseRejectionWarning: TypeError: Cannot read property 'push' of undefined' withous below line code. But if I init the array manually,the old record will be replaced again. // classification.articles = []; classification.articles.push(article); this.ClassificationRepository.save(classification); }); }) }) return null; }

jQuery单击带有按钮的动态创建的元素并不起作用

1 个答案: