通过现场活动触发点击？

Question

我如何尝试使用此事件来触发实时事件，但不会成功。

 $(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而不是添加到边框如果我再次单击而不是删除边框，但是我的问题是我是否从输入按钮添加新数据，而不是使用click创建一个动态部分。

这个怎么做 。

Answer 1

尝试这个

    var clickIdUser = '#'+userIdDy;

    $(clickIdUser).live('click',function(){
        console.log('clicked');
    });

    $(clickIdUser).trigger('click');  

因为clickIdUser是一个变量，其中包含带有＃的controlID。

Answer 2

尝试这个

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

Answer 3

这是您的问题的工作代码

 $(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>