javascript - 通过实时事件触发点击？

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。