javascript - 在循环中将子项添加到 div 后以编程方式执行单击功能

Question

我有一个用于搜索的 jquery 函数定义为

jQuery('#searchBtn').click(function()
   {
      var text = $('#searchbox').val();
      var searchUrl = "getrings.php?searchText=".concat(text);
      if(text.length > 2)
      {          
         jQuery('#sliderloading').removeClass('hide');
         jQuery.ajax({
                    type: "POST",
                    url:  searchUrl,
                    task: "save",
                    data: { 
                        ajax: "true",
                    },
                    dataType : 'json'
                }).done(function( msg ) 
                {

                    if( msg.status == "1") 
                    {
                        if(msg.data.length == 0)
                        {
                          alert('No rings found');
                        }                   
                        else
                        {                               
                          jQuery('.albums-div ul.slides').empty();
                          jQuery.each( msg.data, function( i, val ) 
                          {
                                jQuery('.albums-div ul.slides').append('<li> <input class="teringimage"  type="image" src="'+val['ringThumbNailImagePath']+'" name="checked" value="' + val['id']+'" data-my-info="'+val['ringSetName'] +'"  width="143" right="143"></li>');
                          }); 
                    }
               }
               else 
               {
                        alert("Error : "+msg.error);
                   }
                    jQuery('#sliderloading').addClass('hide');
             });
      }
      else 
      {
        alert("Search text is either empty or less than 3 characters");
      }
   });

我还有一个 jquery 函数

  jQuery('.albums-div ul.slides').on('click','.teringimage',function()
    {
      }

第一个函数，在循环中添加一些图像，第二个函数在单击图像时运行。

但是，在第一个函数中添加图像之后，我想做一些修改

jQuery.each( msg.data, function( i, val ) 
                          {
                                jQuery('.albums-div ul.slides').append('<li> <input class="teringimage"  type="image" src="'+val['ringThumbNailImagePath']+'" name="checked" value="' + val['id']+'" data-my-info="'+val['ringSetName'] +'"  width="143" right="143"></li>');
                          }); 

//

我想以编程方式触发添加的第一个元素上的单击函数，也调用第二个函数。

如何实现这一目标？

我尝试过这样做

jQuery('.albums-div ul.slides').empty();
                          jQuery.each( msg.data, function( i, val ) 
                          {
                                jQuery('.albums-div ul.slides').append('<li> <input class="teringimage"  type="image" src="'+val['ringThumbNailImagePath']+'" name="checked" value="' + val['id']+'" data-my-info="'+val['ringSetName'] +'"  width="143" right="143"></li>');
                          }); 


         $('.albums-div ul.slides:first-child').trigger('click');
    and
    $('.albums-div ul.slides li:first-child').trigger('click');

没有任何效果

我希望此调用能够正常工作

jQuery('.albums-div ul.slides').on('click','.teringimage',function()

Answer 1

尝试使用.trigger(event) ,

$('.albums-div ul.slides li:first-child').trigger('click');

使用，

$('.albums-div ul.slides li:first-child .teringimage[type=image]').trigger('click');