通过实时事件触发点击

trigger click with live event?

本文关键字：事件 实时      更新时间：2023-09-26

如何使用实时事件触发 我尝试使用此代码执行此操作，但没有成功.

$(document).ready(function(){
   $('.newBudgetSec .newBudgetSubmitBtn').click(function(){
       var userIdDy = 900;
       var userBudgetImg = '';
       var userBudgetText = '';
       userBudgetImg = 'http://economictimes.indiatimes.com/photo/50930674.cms';
       userBudgetText = $('.newBudgetSec #addNewBudgetTag').val();
       
       
       var userBudgetHtml = '<div class="imageCont" id='+userIdDy+' name="'+userBudgetText+'"><img id='+userIdDy+' name="'+userBudgetText+'" style="width:100%;" src="'+userBudgetImg+'"></img><span class="tick"></span><span style="background: #494949;*display: inline;display: inline-block;color: #fff;padding: 4px 0 4px 0;width:100%;font-size:13px;font-weight:700;position: relative;top: -27px;">'+userBudgetText+'</span></div>';
       
       console.log(userBudgetHtml);
       $('.budgetListContainer').append(userBudgetHtml);
       $('.newBudgetSec #addNewBudgetTag').val('');
       var clickIdUser = '#'+userIdDy;
       console.log('clickIdUser- ' + clickIdUser);
         jQuery("#clickIdUser").live('click',function(){
            console.log('clicked');
        });
    
         $('#clickIdUser').trigger('click');  
    });
  
  
  
  $('.imageCont').live('click', function(){
   // alert('hello'); 
    $(this).toggleClass('active');
  });
  
});
.budgetListContainer img{width:150px !important;height:150px;}
.imageCont{float:left;margin:5px;}
.active{border:solid 2px red;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.js"></script>
<div class="newBudgetSec"><label for="addNewBudgetTag"><span class="">Outer</span><input id="addNewBudgetTag" value="" type="text"></label><button class="newBudgetSubmitBtn" type="button">Submit</button></div>
<br />
<br />
<div class="budgetListContainer"><div class="imageCont" id="900" name="Rohit"><img id="900" name="Rohit" style="width:100%;" src="http://economictimes.indiatimes.com/photo/50930674.cms"><span class="tick"></span><span style="background: #494949;*display: inline;display: inline-block;color: #fff;padding: 4px 0 4px 0;width:100%;font-size:13px;font-weight:700;position: relative;top: -27px;">Rohit</span></div><div class="imageCont" id="900" name="Azad"><img id="900" name="Azad" style="width:100%;" src="http://economictimes.indiatimes.com/photo/50930674.cms"><span class="tick"></span><span style="background: #494949;*display: inline;display: inline-block;color: #fff;padding: 4px 0 4px 0;width:100%;font-size:13px;font-weight:700;position: relative;top: -27px;">Azad</span></div></div>

如果你点击IMG而不是添加到边框，如果我再次点击而不是删除边框，但我的问题是，如果我从输入按钮添加新数据，而不是通过点击创建一个动态部分。

怎么做这个.

试试这个 

    var clickIdUser = '#'+userIdDy;
    $(clickIdUser).live('click',function(){
        console.log('clicked');
    });
    $(clickIdUser).trigger('click');

因为 clickIdUser 是一个变量，它用 # 保存控件 ID。

这是针对您的问题的工作代码

$(document).ready(function(){
   $('.newBudgetSec .newBudgetSubmitBtn').on('click',function(){
       var userIdDy = 900;
       var userBudgetImg = '';
       var userBudgetText = '';
       userBudgetImg = 'http://economictimes.indiatimes.com/photo/50930674.cms';
       userBudgetText = $('.newBudgetSec #addNewBudgetTag').val();
       
       
       var userBudgetHtml = '<div class="imageCont" id='+userIdDy+' name="'+userBudgetText+'"><img id='+userIdDy+' name="'+userBudgetText+'" style="width:100%;" src="'+userBudgetImg+'"></img><span class="tick"></span><span style="background: #494949;*display: inline;display: inline-block;color: #fff;padding: 4px 0 4px 0;width:100%;font-size:13px;font-weight:700;position: relative;top: -27px;">'+userBudgetText+'</span></div>';
       
       console.log(userBudgetHtml);
       $('.budgetListContainer').append(userBudgetHtml);
       $('.budgetListContainer').trigger('create');
    });
  
  
   $('.budgetListContainer').on('click', '.imageCont', function(){
    //alert('hello'); 
    $(this).toggleClass('active');
  });
 
  
});
.budgetListContainer img{width:150px !important;height:150px;}
.imageCont{float:left;margin:5px;}
.active{border:solid 2px red;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="newBudgetSec"><label for="addNewBudgetTag"><span class="">Outer</span><input id="addNewBudgetTag" value="" type="text"></label><button class="newBudgetSubmitBtn" type="button">Submit</button></div>
<br />
<br />
<div class="budgetListContainer"><div class="imageCont" id="900" name="Rohit"><img id="900" name="Rohit" style="width:100%;" src="http://economictimes.indiatimes.com/photo/50930674.cms"><span class="tick"></span><span style="background: #494949;*display: inline;display: inline-block;color: #fff;padding: 4px 0 4px 0;width:100%;font-size:13px;font-weight:700;position: relative;top: -27px;">Rohit</span></div><div class="imageCont" id="900" name="Azad"><img id="900" name="Azad" style="width:100%;" src="http://economictimes.indiatimes.com/photo/50930674.cms"><span class="tick"></span><span style="background: #494949;*display: inline;display: inline-block;color: #fff;padding: 4px 0 4px 0;width:100%;font-size:13px;font-weight:700;position: relative;top: -27px;">Azad</span></div></div>

试试这个 

 $(document).on('click','.imageCont', function(){
   // alert('hello'); 
   $(this).toggleClass('active');
 });
相关文章：