CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Caffeine addicted
Caffeine addicted

Reputation: 324

Bind independent events to the dynamic added elements

I have this Button click code that is responsible to add Dynamic data 

$("#AddSec").click(function() {

    $("<div />", {
            "class": "wrapper"
        })
        .append($('<span />', {
            "class": "AddCol",
            id: "AddCol" + i
        }).html('(+)col'))
        .append($('<span />', {
            "class": "RemCol",
            id: "RemCol" + i
        }).html('(-)col'))
        .appendTo("#data");
    $("<div />", {
            "class": "SecStyle",
            id: "Section" + i
        })
        .append($("<div/>").attr('class', 'well droppedFields ui-sortable Resizable'))
        .appendTo("#data");
    i++;
});

Following is the Output for this code

<div id="data" style="height: 100px; line-height: 20px; width: 100%; display: table;">
    <div class="wrapper">
        <span class="AddCol" id="AddCol1">(+)col</span>
        <span class="RemCol" id="RemCol1">(-)col</span>
    </div>
    <div class="SecStyle" id="Section1">
        <div class="well droppedFields ui-sortable Resizable ui-resizable ui-droppable">
            <div class="ui-resizable-handle ui-resizable-e" style="z-index: 90; display: block;">
            </div>
        </div>
    </div>
    <div class="wrapper"><span class="AddCol" id="AddCol2">(+)col</span>
        <span class="RemCol" id="RemCol2">(-)col</span>
    </div>
    <div class="SecStyle" id="Section2">
        <div class="well droppedFields ui-sortable Resizable ui-resizable ui-droppable">
            <div class="ui-resizable-handle ui-resizable-e" style="z-index: 90; display: block;">
            </div>
        </div>
    </div>
</div>

Following is the html layout for above output enter image description here

(+)col (-)col are 

<span class="AddCol" id="AddCol1">(+)col</span>
<span class="RemCol" id="RemCol1">(-)col</span>

respectively with different ids everytime

Now i have to handle the click event for every (+)col , independently for each time the dynamic section added

can any one help to keep me close to this

Upvotes: 1

Views: 101

Answers (3)

PeterKA
PeterKA

Reputation: 24638

For the dynamically created buttons you would use event delegation:

$(document).on('click', '.AddCol', function() {
    //your code here
    // this.id gives you the id of the button clicked
});

 $(document).on('click', '.RemCol', function() {
    //your code here
    // this.id gives you the id of the button clicked
});

To improve performance, if #data is not dynamically created, use:

$('#data').on('click', '.AddCol', .....); //and
$('#data').on('click', '.RemCol', .....);


$(document).on('click', '.AddCol,.RemCol', function() {
     //your code here
     alert( this.id ); // gives you the id of the button clicked
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="AddCol" id="AddCol1">(+)col</span>
<span class="RemCol" id="RemCol1">(-)col</span>
<span class="AddCol" id="AddCol2">(+)col</span> 
<span class="RemCol" id="RemCol2">(-)col</span>

Reference:

-- jQuery.live()

$( document ).delegate( selector, events, data, handler );  // jQuery 1.4.3+
$( document ).on( events, selector, data, handler );        // jQuery 1.7+

Upvotes: 1

Diego Montoya
Diego Montoya

Reputation: 139

You could add dinamically click listener to each added element as follows:

var $wrapper = $("<div />", { "class": "wrapper" });
var $spanplus = $('<span />', { "class": "AddCol", id: "AddCol" + i}).html('(+)col');
//Binds click event
$spanplus.on('click',function(){ //Your onclick code});

//Append the span to the wrapper
$wrapper.append($spanplus);

Upvotes: 0

Eli Gassert
Eli Gassert

Reputation: 9763

You will use event bubbling and event delegation in jQuery: http://api.jquery.com/on/

Something like this:

$('#data').on('click', '.AddCol', function(event) {
  var $addCol = $(event.currentTarget);
  var $wrapper = $addCol.closest('.wrapper');
});

The reason you can't use $(this) is because you're actually binding on the static/pre-defined #data element. But it will capture bubbled events and trigger from anything matching the .AddCol selector. The element that triggered the event is in event.currentTarget

Upvotes: 0

Related Questions