CODEWITHSUNDEEP
javascriptjqueryhtml
Rohit Azad Malik
Rohit Azad Malik

Reputation: 32192

trigger click with live event?

How to trigger with live event Im try to do it with this code but not success .

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

if your click to img than add to border if i click to again than remove border but my question is if i add new data from input button than it's create a dynamic section with click .

How to do this .

Upvotes: 1

Views: 104

Answers (3)

Jobelle
Jobelle

Reputation: 2834

Try this 

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

Upvotes: 0

bngk
bngk

Reputation: 59

Here is the working code for your problem

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

Upvotes: 0

shu
shu

Reputation: 1956

Try this 

    var clickIdUser = '#'+userIdDy;

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

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

as clickIdUser is a variable which holds the controlID with #.

Upvotes: 1

Related Questions