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

如何做到这一点。

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

以下是您的问题的工作代码

＆＃13;

$(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');
  });
 
  

});

＆＃13;

.budgetListContainer img{width:150px !important;height:150px;}
.imageCont{float:left;margin:5px;}

.active{border:solid 2px red;}

＆＃13;

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

＆＃13;

触发点击直播活动？

3 个答案: