Go4Expert

Go4Expert (http://www.go4expert.com/)
-   JavaScript and AJAX (http://www.go4expert.com/articles/javascript-tutorials/)
-   -   How to Bind jQuery Events to Dynamically Created Elements (http://www.go4expert.com/articles/bind-jquery-events-dynamically-created-t29931/)

shabbir 14Dec2013 08:46

How to Bind jQuery Events to Dynamically Created Elements
 
There are multiple ways to attach an event handler in jQuery but all of them does not function exactly the same way. If there are elements created after DOM is loaded, then not all the events associated with them would be triggered if you have not attached the event handlers correctly.

Example



Let us say that we have a textarea element in an HTML document.

HTML Code:

<textarea id="MessageArea1" name="MessageArea1" rows="10" cols="40">Added in HTML as MessageArea1</textarea>
To bind a click event handler to all the textarea's in the document, ideally we would write the following jQuery code
Code: JavaScript

$("textarea").click(function(){
    // Do something when textarea is clicked
});

The above code works fine for all those text area that are loaded till now in the document but not those that are added after the above code is executed. So if we want to handle the click event handlers for those textarea as well then we just make sure the above code is executed after all the textarea's are loaded and we normally do that in the ready event.

Something like this
Code: JavaScript

$(document).ready(function() {
    $("textarea").click(function(){
        // Do something when textarea is clicked
    });
});


What if we want to be adding adding new textarea's based on some Ajax. How will a click attach the same functionality of click event for them as well?

The solution is to be using the .on function to attach events handler for all elements now and in the future. Prior to jQuery 1.7, the .live() method was used but is now deprecated and so I will share the sample with the on function only.
Code: JavaScript

$(document).ready(function() {
    $(document).on("click","textarea",function(){
        // Do something when textarea is clicked
    });
});

Here is the HTML to see the issue in action by adding the text area in JavaScript.
HTML Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en">
<head>
        <title>Binding jQuery Events for Dynamically Created Elements - Go4Expert</title>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<style>
body{font-family:arial;}
</style>
<script>
$(document).ready(function() {
        $("textarea").click(function(){
                $("#output").append("<p>(textarea).click executed on " + $(this).attr("id") + "</p>");
        });
        $(document).on("click","textarea",function(){
                $("#output").append("<p>on click executed on " + $(this).attr("id") + "</p>");
        });
        $("tr").append('<td><textarea id="MessageArea2" name="MessageArea2" rows="10" cols="40">Dynamically Added After Document Loaded as MessageArea2</textarea></td>');
});
</script>
</head>
<body>
        <form>
                <table>
                        <tr><td>
                                <textarea id="MessageArea1" name="MessageArea1" rows="10" cols="40">Added in HTML as MessageArea1</textarea>
                        </td></tr>
                </table>
        </form>
        <div id="output"><h1>Output will be Displayed Here.</h1></div>
</body>
</html>

You can find the above code in action here.

Clicking MessageArea1 will produce the output as
(textarea).click executed on MessageArea1

on click executed on MessageArea1
But Clicking MessageArea2 the output will be
on click executed on MessageArea2


All times are GMT +5.5. The time now is 08:07.