Jquery method doesn't work after creating HTML in JQUERY

Question

var stringhtml =  $('<div class="row" id="ao-clonedata">' + '<div class="col-lg-12 form-inline ao-content-padding">' + '<div class="col-xs-1 pull-left ao-from-triggers">'+'<a class="add-link ao-minus-color" title="Remove">'+'<i class="fa fa-minus fa-lg"></i></a>'+'<a class="add-link ao-plus-color ao-spacing-icon" title="Add"><i class="fa fa-plus fa-lg"></i></a>'+'</div> '+'<div class="col-xs-5 dropdown pull-left ao-padding-zero">'+'<button class="btn dropdown-toggle ao-substitute-dropdown  ao-dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">'+'<span class="pull-left" id="ao-substitute-from">Select Value</span><i class="caret pull-right custom-dropdown-caret"></i>'+'</button>'+'<ul class="dropdown-menu ao-substitute-ul-dropdown" aria-labelledby="substituteFrom">'+'<li onclick="ChangeSubstituteStatus(1,'+' "Select Value",'+' this)"><a href="javascript:void(0);">Select Value</a></li>'+'</ul>'+'</div>'+'<div class="col-xs-1">'+'<i class="fa fa-arrow-right fa-lg ao-substitute-arrow" id="ao-arrowbutton"></i>'+'</div>'+'<div class="col-xs-5">'+'<div class="form-inline" id="ao-clonetodata">'+'<div class="dropdown ao-substitute-dropdown pull-left">'+'<button class="btn dropdown-toggle ao-substitute-dropdown ao-dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">'+'<span class="pull-left" id="ao-substitute-to">Select Value</span><i class="caret pull-right custom-dropdown-caret"></i>'+'</button>'+' <ul class="dropdown-menu ao-substitute-ul-dropdown" aria-labelledby="substituteTo">'+'<li onclick="ChangeSubstituteToStatus(1, "Select Value", this)"><a href="javascript:void(0);">Select Value</a></li>'+'<li onclick="ChangeSubstituteToStatus(2, "About Time", this)"><a href="javascript:void(0);">About Time</a>'+'</li>'+'</ul>'+'</div>'+'</div>'+'</div>'+'</div>'+'</div>');

Creating this HTML on click of an initial(X) button, after creating this html,need to clone this html on click of ".ao-plus-color" (which is there in above HTML). so whatever method i wrote for ".ao-plus-color" is not working.

method for ".ao-plus-color" is :

$(".ao-plus-color").on('click', function () {
CCounter = $("#ao-clonewrapper > .row").length + 1;
var clonedata = $("#ao-clonedata").clone(true).attr("id", "ao-clonedata" + CCounter).appendTo("#ao-clonewrapper");

CCounter++;

var clonedatalength = $("#ao-clonewrapper > .row").length;
if (clonedatalength > 0) {
    $("#ao-remove-all").show();
} });

can any one help me out to solve this? thanks in advance!

you should bind the event to already created element ao-plus-color is also dynamically created try using document like $(document).on('click','.ao-plus-color', function () { — guradio
– guradio, Commented May 4, 2016 at 9:21

guradio · Accepted Answer · 2016-05-04 09:43:39Z

2

You should bind the event to already created element ao-plus-color is also dynamically created.Use document like

$(document).on('click','.ao-plus-color', function () {

answered May 4, 2016 at 9:43

guradio

15.6k4 gold badges39 silver badges65 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Milind Anantwar · Accepted Answer · 2016-05-04 09:22:01Z

0

You need to use event delegation for attaching events to dynamically added elemens:

$("body").on('click',".ao-plus-color", function () {
 CCounter = $("#ao-clonewrapper > .row").length + 1;
 var clonedata = $("#ao-clonedata").clone(true).attr("id", "ao-clonedata" +      CCounter).appendTo("#ao-clonewrapper");
 CCounter++;
 var clonedatalength = $("#ao-clonewrapper > .row").length;
 if (clonedatalength > 0) {
  $("#ao-remove-all").show();
 } 
});

answered May 4, 2016 at 9:22

Milind Anantwar

82.3k26 gold badges97 silver badges128 bronze badges

1 Comment

Milind Anantwar Over a year ago

@IamSarav: glad it helps :)

Collectives™ on Stack Overflow

Jquery method doesn't work after creating HTML in JQUERY

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related