jQuery - Bind Onclick Event to Dynamically Created Elements

Wikitechy | 15628 Views | jquery | 02 Jun 2016

 

  • In jQuery 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 (Document Object Model) is loaded, then not all the events associated with them would be triggered if you have not attached the event handlers correctly.
  • If you want to add an element dynamically, use DOM in jQuery click() method (It will not work, because it binds the click event only to the elements that exist at the time of binding)
  • To bind the click event to all the existing and future elements, use the jQuery on() method. 

Sample Code: 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta
charset="utf-8">
    <title>

        wikitechy-jQuery create event binding to dynamically created Elements
    </title> 
    <script
type="text/javascript" src="http://code.jquery.com/jquery.js"></script>
    <script
type="text/javascript">
        $(document).ready(function(){
            $("button").click(function(){
                $("ol").append("<li>list item <a href='javascript:void(0);'class='remove'>&times;</a></li>"); 
            });
            $(document).on("click", "a.remove" , function(){
                $(this).parent().remove();
            });
        });
    </script>
</head>
<body>
    <button>
WikiTechy - Add new list item</button>
    <p>
Click above button to dynamically add new list items with remove options next to it</p>
    <ol>
        <li>
list item</li>
        <li>list item</li>
        <li
>list item</li>
    </ol>
</body> 
</html>

Working Flow jQuery:


Code Explanation:


    Here in this statement we have created a button ”Wikitechy – Add new list item” using button element.

    In this statement we have listed the 3 list items inside the ordered list <ol> tag.

Below this we have shown the output browser window for the button and the ordered list items.

 

    Here in this statement we have mentioned the title for the HTML Document as “wikitechy-jQuery create event binding to dynamically created Elements”.  

    Inside the <script src=” http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js “> </script> the ajax library has been called using the (src)=source attribute.

    The $(document).ready(function);  - specifies that the document to be fully loaded and ready before working with it, in order to prevent any jQuery code from running before the document is finished loading.


    $("button").click(function(){ - here is the button click event, which has been called here as element selector whose element “button” has been assigned for the click function.

    Here in this statement we use the element selector assigned for the append function for the element “ol(order list)” in which the list of item values are counted by using javascript:void(0) function . Apart from that here we use remove class in order to remove the items dynamically which is represented as cross symbol (x).

    In this statement we have mentioned the remove function for the remove items once we click the cross symbol (x) which we can view in the output browser window dynamically.

    Here in this statement we write the function for the parent element where the current element can be removed by clicking the cross symbol(x) which is assigned in the “on” click function.

Sample Output:


     Here in this output we have shown the button ”WikiTechy-Add new list item” clicked for 1st time where the new list item “4. list item” has be added in the list as shown.

 

    Similarly, here in this output we have shown the button ”WikiTechy-Add new list item” clicked for 2nd time where the new list item “5. list item” has be added in the list as shown.

 

    In the same way , here in this output we have shown the button ”WikiTechy-Add new list item” clicked for 3rd time where the new list item “6. list item” has be added in the list as shown.

 

    Here in this output if we try to close the “4.list item” by clicking on the cross symbol (x) .


    Here in this output if we try to close the “4.list item” by clicking on the cross symbol (x) the item will be removed as shown.




Workshop

Bug Bounty
Webinar

Join our Community

Advertise
<